@likable-hair/svelte 3.3.21 → 3.3.23

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

@@ -1,126 +1,178 @@
-<script>import IMask, { InputMask } from "imask";
-import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePicker from "../../simple/dates/DatePicker.svelte";
-import Menu from "../../simple/common/Menu.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-import { onMount } from "svelte";
-import { DateTime } from "luxon";
-import { createEventDispatcher } from "svelte";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-import Dialog from "../../simple/dialogs/Dialog.svelte";
-let clazz = {};
-export { clazz as class };
-let dispatch = createEventDispatcher();
-export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970, disabled = false, flipOnOverflow = true;
-let activator, refreshPosition = false, menuElement, inputElement, mask = {
-  value: void 0
-}, maskFactoryArgs = {
-  mask: Date,
-  pattern,
-  format: function(date) {
-    return DateTime.fromJSDate(date).toFormat(pattern);
-  },
-  parse: function(str) {
-    return DateTime.fromFormat(str, pattern).toJSDate();
-  },
-  blocks: {
-    yyyy: {
-      mask: IMask.MaskedRange,
-      from: minYearInRange,
-      to: maxYearInRange
-    },
-    MM: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 12
-    },
-    dd: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 31
+<script lang="ts">
+  import IMask, { InputMask, type FactoryArg } from 'imask';
+  import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+  import DatePicker from "../../simple/dates/DatePicker.svelte";
+  import Menu from "../../simple/common/Menu.svelte";
+  import Icon from "../../simple/media/Icon.svelte";
+  import { onMount, type ComponentProps } from 'svelte';
+  import { DateTime } from 'luxon'
+  import { createEventDispatcher } from 'svelte';
+  import type { DateStat } from '../../simple/dates/utils';
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import Dialog from '../../simple/dialogs/Dialog.svelte';
+
+  let clazz: {
+    activator?: string,
+    textfield?: ComponentProps<SimpleTextField>['class']
+  } = {};
+	export { clazz as class };
+
+  let dispatch = createEventDispatcher<{
+    'day-click': {
+      dateStat: DateStat
     },
-    HH: {
-      mask: IMask.MaskedRange,
-      from: 0,
-      to: 23
+    input: {
+      datetime: Date | undefined
+    }
+  }>()
+
+  export let menuOpened: boolean = false,
+    openingId: string = 'date-picker-text-field',
+    pattern: string = "dd/MM/yyyy",
+    selectedMonth: number | undefined = undefined,
+    selectedYear: number | undefined = undefined,
+    visibleMonth: number | undefined = undefined,
+    visibleYear: number | undefined = undefined,
+    selectedDate: Date | undefined = undefined,
+    placeholder: string | undefined = undefined,
+    mobileDialog: boolean = true,
+    maxYearInRange: number = 2100,
+    minYearInRange: number = 1970,
+    disabled: boolean = false,
+    flipOnOverflow: boolean = true
+
+
+  let activator: HTMLElement,
+    refreshPosition = false,
+    menuElement: HTMLElement,
+    inputElement: HTMLElement,
+    mask: InputMask<typeof maskFactoryArgs> | { value: string | undefined } = {
+      value: undefined
     },
-    mm: {
-      mask: IMask.MaskedRange,
-      from: 0,
-      to: 59
+    maskFactoryArgs = {
+      mask: Date,
+      pattern: pattern,
+      format: function (date: any): string {
+        return DateTime.fromJSDate(date).toFormat(pattern)
+      },
+      parse: function (str: string): Date {
+        return DateTime.fromFormat(str, pattern).toJSDate()
+      },
+      blocks: {
+        yyyy: {
+          mask: IMask.MaskedRange,
+          from: minYearInRange,
+          to: maxYearInRange
+        },
+        MM: {
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 12
+        },
+        dd: {
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 31
+        },
+        HH: {
+          mask: IMask.MaskedRange,
+          from: 0,
+          to: 23
+        },
+        mm: {
+          mask: IMask.MaskedRange,
+          from: 0,
+          to: 59
+        }
+      }
+    }
+
+  function handleTextFieldFocus(mobile: boolean) {
+    if(!mobile || !mobileDialog) {
+      menuOpened = true
     }
   }
-};
-function handleTextFieldFocus(mobile) {
-  if (!mobile || !mobileDialog) {
-    menuOpened = true;
-  }
-}
-onMount(() => {
-  mask = IMask(
-    inputElement,
-    maskFactoryArgs
-  );
-  if (!!selectedDate) {
-    mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
-  }
-});
-$:
-  if (!selectedDate) {
-    mask.value = "";
+
+  onMount(() => {
+    mask = IMask(
+      inputElement, maskFactoryArgs
+    )
+
+    if(!!selectedDate) {
+      mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern)
+    }
+  })
+
+  $: if(!selectedDate) {
+    mask.value = ""
   }
-function handleInputChange(event) {
-  setTimeout(() => {
-    const typedValue = mask.value;
-    if (typedValue !== void 0 && typedValue !== null) {
-      const dayOfMonthIndex = pattern.indexOf("dd");
-      const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2);
-      const monthIndex = pattern.indexOf("MM");
-      const oneBasedMonth = typedValue.substring(monthIndex, monthIndex + 2);
-      if (oneBasedMonth.length == 2) {
-        selectedMonth = Number(oneBasedMonth) - 1;
-        visibleMonth = selectedMonth;
-      }
-      const yearIndex = pattern.indexOf("yyyy");
-      const year = typedValue.substring(yearIndex, yearIndex + 4);
-      if (year.length == 4) {
-        selectedYear = Number(year);
-        visibleYear = selectedYear;
-      }
-      if (typedValue.length == pattern.length) {
-        selectedDate = DateTime.fromObject({
-          day: Number(dayOfMonth),
-          month: Number(oneBasedMonth),
-          year: Number(year)
-        }).toJSDate();
-      } else {
-        selectedDate = void 0;
+
+  function handleInputChange(event: any) {
+    setTimeout(() => {
+      const typedValue = mask.value
+
+      if(typedValue !== undefined && typedValue !== null) {
+        // find day of month
+        const dayOfMonthIndex = pattern.indexOf('dd')
+        const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2)
+
+        // find month
+        const monthIndex = pattern.indexOf('MM')
+        const oneBasedMonth = typedValue.substring(monthIndex, monthIndex + 2)
+        if(oneBasedMonth.length == 2) {
+          selectedMonth = Number(oneBasedMonth) - 1
+          visibleMonth = selectedMonth
+        }
+
+        // find year
+        const yearIndex = pattern.indexOf('yyyy')
+        const year = typedValue.substring(yearIndex, yearIndex + 4)
+        if(year.length == 4) {
+          selectedYear = Number(year)
+          visibleYear = selectedYear
+        }
+
+        if(typedValue.length == pattern.length) {
+          selectedDate = DateTime.fromObject({
+            day: Number(dayOfMonth),
+            month: Number(oneBasedMonth),
+            year: Number(year)
+          }).toJSDate()
+        } else {
+          selectedDate = undefined
+        }
+
+        dispatch('input', {
+          datetime: selectedDate
+        })
       }
-      dispatch("input", {
-        datetime: selectedDate
-      });
+    }, 30);
+  }
+
+  function handleDateSelect(ev: CustomEvent<{
+    dateStat: DateStat
+  }>) {
+    if(!!selectedDate) {
+      mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern)
     }
-  }, 30);
-}
-function handleDateSelect(ev) {
-  if (!!selectedDate) {
-    mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+
+    dispatch('day-click', {
+      dateStat: ev.detail.dateStat
+    })
+  }
+
+  function handleYearSelect() {
+    mask.value = ''
+  }
+
+  function handleMonthSelect() {
+    mask.value = ''
   }
-  dispatch("day-click", {
-    dateStat: ev.detail.dateStat
-  });
-}
-function handleYearSelect() {
-  mask.value = "";
-}
-function handleMonthSelect() {
-  mask.value = "";
-}
-$:
-  if (!!selectedDate) {
+
+  $: if(!!selectedDate) {
     setTimeout(() => {
-      if (!!selectedDate) {
-        mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+      if(!!selectedDate) {
+        mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern)
       }
     }, 30);
   }

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

@@ -1,70 +1,74 @@
-import { SvelteComponent } from "svelte";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import { type ComponentProps } from 'svelte';
 import type { DateStat } from '../../simple/dates/utils';
-declare const __propDef: {
-    props: {
-        class?: {
-            activator?: string | undefined;
-            textfield?: ComponentProps<SimpleTextField>['class'];
-        } | undefined;
-        menuOpened?: boolean | undefined;
-        openingId?: string | undefined;
-        pattern?: string | undefined;
-        selectedMonth?: number | undefined;
-        selectedYear?: number | undefined;
-        visibleMonth?: number | undefined;
-        visibleYear?: number | undefined;
-        selectedDate?: Date | undefined;
-        placeholder?: string | undefined;
-        mobileDialog?: boolean | undefined;
-        maxYearInRange?: number | undefined;
-        minYearInRange?: number | undefined;
-        disabled?: boolean | undefined;
-        flipOnOverflow?: boolean | 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: {
-        'day-click': CustomEvent<{
-            dateStat: DateStat;
-        }>;
-        input: CustomEvent<{
-            datetime: Date | undefined;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const DatePickerTextField: $$__sveltets_2_IsomorphicComponent<{
+    class?: {
+        activator?: string;
+        textfield?: ComponentProps<SimpleTextField>["class"];
     };
-    slots: {
-        activator: {
-            mask: {
-                value: string | undefined;
-            };
-            handleTextFieldFocus: (mobile: boolean) => void;
-            handleInputChange: (event: any) => void;
-            inputElement: HTMLElement;
-            placeholder: string | undefined;
-            disabled: boolean;
-        };
-        'prepend-inner': {
-            prependInnerIcon: string | undefined;
-            iconSize: string;
-        };
-        'append-inner': {
-            appendInnerIcon: string | undefined;
-            iconSize: string;
-        };
-        prepend: {
-            prependIcon: string | undefined;
-            iconSize: string;
-        };
-        append: {
-            appendIcon: string | undefined;
-            iconSize: string;
+    menuOpened?: boolean;
+    openingId?: string;
+    pattern?: string;
+    selectedMonth?: number | undefined;
+    selectedYear?: number | undefined;
+    visibleMonth?: number | undefined;
+    visibleYear?: number | undefined;
+    selectedDate?: Date | undefined;
+    placeholder?: string | undefined;
+    mobileDialog?: boolean;
+    maxYearInRange?: number;
+    minYearInRange?: number;
+    disabled?: boolean;
+    flipOnOverflow?: boolean;
+}, {
+    'day-click': CustomEvent<{
+        dateStat: DateStat;
+    }>;
+    input: CustomEvent<{
+        datetime: Date | undefined;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    activator: {
+        mask: {
+            value: string | undefined;
         };
+        handleTextFieldFocus: (mobile: boolean) => void;
+        handleInputChange: (event: any) => void;
+        inputElement: HTMLElement;
+        placeholder: string | undefined;
+        disabled: boolean;
     };
-};
-export type DatePickerTextFieldProps = typeof __propDef.props;
-export type DatePickerTextFieldEvents = typeof __propDef.events;
-export type DatePickerTextFieldSlots = typeof __propDef.slots;
-export default class DatePickerTextField extends SvelteComponent<DatePickerTextFieldProps, DatePickerTextFieldEvents, DatePickerTextFieldSlots> {
-}
-export {};
+    'prepend-inner': {
+        prependInnerIcon: string | undefined;
+        iconSize: string;
+    };
+    'append-inner': {
+        appendInnerIcon: string | undefined;
+        iconSize: string;
+    };
+    prepend: {
+        prependIcon: string | undefined;
+        iconSize: string;
+    };
+    append: {
+        appendIcon: string | undefined;
+        iconSize: string;
+    };
+}, {}, string>;
+type DatePickerTextField = InstanceType<typeof DatePickerTextField>;
+export default DatePickerTextField;

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

@@ -1,25 +1,55 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+  import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
+  export type { Item }
+</script>
+
+<script lang="ts">
+  import lodash from "lodash";
+  import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+  import Button from '../../simple/buttons/Button.svelte'
+  import Icon from '../../simple/media/Icon.svelte'
+  import { createEventDispatcher } from "svelte";
+
+  let dispatch = createEventDispatcher<{
+    change: {
+      unselect: Item | undefined;
+      select: Item | undefined;
+      selection: Item[];
+    }
+  }>()
+
+  export let items: Item[] = [],
+    values: Item[] = [],
+    multiple: boolean = false,
+    lang: 'it' | 'en' = 'en',
+    searchText: string | undefined = undefined,
+    maxVisibleChips: number | undefined = undefined,
+    placeholder: string = lang == 'en' ? "Select" : "Seleziona",
+    clearable: boolean = true,
+    mandatory: boolean = true,
+    icon: string | undefined = undefined,
+    menuOpened: boolean = false,
+    openingId: string | undefined = undefined,
+    width: string | undefined = undefined,
+    minWidth: string | undefined = undefined,
+    menuWidth: string | undefined = width,
+    mobileDrawer: boolean = false,
+    disabled: boolean = false
 
-<script>import lodash from "lodash";
-import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
-import Button from "../../simple/buttons/Button.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-import { createEventDispatcher } from "svelte";
-let dispatch = createEventDispatcher();
-export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0, width = void 0, minWidth = void 0, menuWidth = width, mobileDrawer = false, disabled = false;
-$:
-  generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
-function handleCloseClick(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  let valuesBefore = lodash.cloneDeep(values);
-  values = [];
-  dispatch("change", {
-    unselect: valuesBefore[0],
-    select: void 0,
-    selection: []
-  });
-}
+  $: generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`
+
+  function handleCloseClick(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    let valuesBefore = lodash.cloneDeep(values)
+    values = []
+
+    dispatch('change', {
+      unselect: valuesBefore[0],
+      select: undefined,
+      selection: []
+    })
+  }
 </script>
 
 <Autocomplete

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

@@ -1,48 +1,53 @@
-import { SvelteComponent } from "svelte";
 import type { Item } from "../../../components/simple/forms/Autocomplete.svelte";
 export type { Item };
-declare const __propDef: {
-    props: {
-        items?: Item[] | undefined;
-        values?: Item[] | undefined;
-        multiple?: boolean | undefined;
-        lang?: "it" | "en" | undefined;
-        searchText?: string | undefined;
-        maxVisibleChips?: number | undefined;
-        placeholder?: string | undefined;
-        clearable?: boolean | undefined;
-        mandatory?: boolean | undefined;
-        icon?: string | undefined;
-        menuOpened?: boolean | undefined;
-        openingId?: string | undefined;
-        width?: string | undefined;
-        minWidth?: string | undefined;
-        menuWidth?: string | undefined;
-        mobileDrawer?: boolean | undefined;
-        disabled?: boolean | 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: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
+    items?: Item[];
+    values?: Item[];
+    multiple?: boolean;
+    lang?: "it" | "en";
+    searchText?: string | undefined;
+    maxVisibleChips?: number | undefined;
+    placeholder?: string;
+    clearable?: boolean;
+    mandatory?: boolean;
+    icon?: string | undefined;
+    menuOpened?: boolean;
+    openingId?: string | undefined;
+    width?: string | undefined;
+    minWidth?: string | undefined;
+    menuWidth?: string | undefined;
+    mobileDrawer?: boolean;
+    disabled?: boolean;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    label: {
+        values: Item[];
+        items: Item[];
+        searchText: string | undefined;
+        generatedLabel: string | number | undefined;
+        placeholder: string;
+        clearable: boolean;
+        handleCloseClick: (event: MouseEvent) => void;
     };
-    slots: {
-        label: {
-            values: Item[];
-            items: Item[];
-            searchText: string | undefined;
-            generatedLabel: string | number | undefined;
-            placeholder: string;
-            clearable: boolean;
-            handleCloseClick: (event: MouseEvent) => void;
-        };
-        'item-label': {
-            item: Item;
-        };
+    'item-label': {
+        item: Item;
     };
-};
-export type DropdownProps = typeof __propDef.props;
-export type DropdownEvents = typeof __propDef.events;
-export type DropdownSlots = typeof __propDef.slots;
-export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
-}
+}, {}, string>;
+type Dropdown = InstanceType<typeof Dropdown>;
+export default Dropdown;