@likable-hair/svelte 3.3.21 → 3.3.23

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

@@ -1,84 +1,124 @@
-<script>import IMask, { InputMask } from "imask";
-import SimpleTextField from "../../simple/forms/SimpleTextField.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";
-import YearSelector from "../../simple/dates/YearSelector.svelte";
-let clazz = {};
-export { clazz as class };
-let dispatch = createEventDispatcher();
-export let menuOpened = false, openingId = "year-picker-text-field", selectedYear = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1900, disabled = false;
-let activator, refreshPosition = false, menuElement, inputElement, pattern = "yyyy", 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
+<script lang="ts">
+  import IMask, { InputMask } from 'imask';
+  import SimpleTextField from "../../simple/forms/SimpleTextField.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 MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import Dialog from '../../simple/dialogs/Dialog.svelte';
+    import YearSelector from '../../simple/dates/YearSelector.svelte';
+
+  let clazz: {
+    activator?: string,
+    textfield?: ComponentProps<SimpleTextField>['class']
+  } = {};
+	export { clazz as class };
+
+  let dispatch = createEventDispatcher<{
+    'year-click': {
+      year: number
+    },
+    input: {
+      year: number | undefined
+    }
+  }>()
+
+  export let menuOpened: boolean = false,
+    openingId: string = 'year-picker-text-field',
+    selectedYear: number | undefined = undefined,
+    placeholder: string | undefined = undefined,
+    mobileDialog: boolean = true,
+    maxYearInRange: number = 2100,
+    minYearInRange: number = 1900,
+    disabled: boolean = false
+
+  let activator: HTMLElement,
+    refreshPosition = false,
+    menuElement: HTMLElement,
+    inputElement: HTMLElement,
+    pattern: string = "yyyy",
+    mask: InputMask<typeof maskFactoryArgs> | { value: string | undefined } = {
+      value: undefined
+    },
+    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
+        }
+      }
+    }
+
+  function handleTextFieldFocus(mobile: boolean) {
+    if(!mobile || !mobileDialog) {
+      menuOpened = true
     }
   }
-};
-function handleTextFieldFocus(mobile) {
-  if (!mobile || !mobileDialog) {
-    menuOpened = true;
+
+  onMount(() => {
+    mask = IMask(
+      inputElement, maskFactoryArgs
+    )
+
+    if(selectedYear !== undefined && selectedYear !== null) {
+      mask.value = selectedYear.toString()
+    }
+  })
+
+  function handleInputChange(event: any) {
+    setTimeout(() => {
+      const typedValue = mask.value
+
+      if(typedValue !== undefined && typedValue !== null) {
+        // find year
+        const yearIndex = pattern.indexOf('yyyy')
+        const year = typedValue.substring(yearIndex, yearIndex + 4)
+        if(year.length == 4) {
+          selectedYear = Number(year)
+        } else if(year.length == 0) {
+          selectedYear = undefined
+        }
+
+        dispatch('input', {
+          year: selectedYear
+        })
+      }
+    }, 30);
   }
-}
-onMount(() => {
-  mask = IMask(
-    inputElement,
-    maskFactoryArgs
-  );
-  if (selectedYear !== void 0 && selectedYear !== null) {
-    mask.value = selectedYear.toString();
+
+  function handleYearClick(ev: CustomEvent<{
+    year: number
+  }>) {
+    dispatch('year-click', {
+      year: ev.detail.year
+    })
   }
-});
-function handleInputChange(event) {
-  setTimeout(() => {
-    const typedValue = mask.value;
-    if (typedValue !== void 0 && typedValue !== null) {
-      const yearIndex = pattern.indexOf("yyyy");
-      const year = typedValue.substring(yearIndex, yearIndex + 4);
-      if (year.length == 4) {
-        selectedYear = Number(year);
-      } else if (year.length == 0) {
-        selectedYear = void 0;
-      }
-      dispatch("input", {
-        year: selectedYear
-      });
+
+  function handleYearChange(ev: CustomEvent<{
+    year: number | undefined
+  }>) {
+    if(!!selectedYear) {
+      mask.value = selectedYear.toString()
+    } else {
+      mask.value = ''
     }
-  }, 30);
-}
-function handleYearClick(ev) {
-  dispatch("year-click", {
-    year: ev.detail.year
-  });
-}
-function handleYearChange(ev) {
-  if (!!selectedYear) {
-    mask.value = selectedYear.toString();
-  } else {
-    mask.value = "";
   }
-}
-$:
-  if (!!selectedYear) {
+
+  $: if(!!selectedYear) {
     setTimeout(() => {
-      if (!!selectedYear) {
-        mask.value = selectedYear.toString();
+      if(!!selectedYear) {
+        mask.value = selectedYear.toString()
       }
     }, 30);
   }

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

@@ -1,55 +1,59 @@
-import { SvelteComponent } from "svelte";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import { type ComponentProps } from 'svelte';
-declare const __propDef: {
-    props: {
-        class?: {
-            activator?: string | undefined;
-            textfield?: ComponentProps<SimpleTextField>['class'];
-        } | undefined;
-        menuOpened?: boolean | undefined;
-        openingId?: string | undefined;
-        selectedYear?: number | undefined;
-        placeholder?: string | undefined;
-        mobileDialog?: boolean | undefined;
-        maxYearInRange?: number | undefined;
-        minYearInRange?: number | 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: {
-        'year-click': CustomEvent<{
-            year: number;
-        }>;
-        input: CustomEvent<{
-            year: number | undefined;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const YearPickerTextField: $$__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': {
-            appendIcon: string | undefined;
-            iconSize: string;
+    menuOpened?: boolean;
+    openingId?: string;
+    selectedYear?: number | undefined;
+    placeholder?: string | undefined;
+    mobileDialog?: boolean;
+    maxYearInRange?: number;
+    minYearInRange?: number;
+    disabled?: boolean;
+}, {
+    'year-click': CustomEvent<{
+        year: number;
+    }>;
+    input: CustomEvent<{
+        year: number | 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 YearPickerTextFieldProps = typeof __propDef.props;
-export type YearPickerTextFieldEvents = typeof __propDef.events;
-export type YearPickerTextFieldSlots = typeof __propDef.slots;
-export default class YearPickerTextField extends SvelteComponent<YearPickerTextFieldProps, YearPickerTextFieldEvents, YearPickerTextFieldSlots> {
-}
-export {};
+    'prepend-inner': {
+        prependInnerIcon: string | undefined;
+        iconSize: string;
+    };
+    'append-inner': {
+        appendIcon: string | undefined;
+        iconSize: string;
+    };
+}, {}, string>;
+type YearPickerTextField = InstanceType<typeof YearPickerTextField>;
+export default YearPickerTextField;