@cloudparker/moldex.js 0.0.124 → 4.1.0

package/dist/views/core/input/components/phone-field/phone-field.svelte

@@ -1,107 +1,158 @@
-<script module lang="ts"></script>
-
-<script lang="ts">import { ripple } from "../../../../../actions";
-import { openPickerDialog } from "../../../../../services";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  id,
-  name,
-  value = $bindable(""),
-  size,
-  appearance,
-  buttonClassName,
-  className,
-  dialCode = $bindable("+1"),
-  floatingLabel,
-  labelClassName,
-  ...props
-} = $props();
-let EasyCountryData;
-let LibPhonenumber = $state(null);
-let inputFieldRef = $state(null);
-let dailCodeValue = $derived.by(() => {
-  if (value && LibPhonenumber) {
-    let { dialCode: dialCode2 } = validatePhoneNumber(value);
-    return dialCode2;
-  }
-  return formatDialCode(dialCode);
-});
-let phoneNumberValue = $derived.by(() => {
-  if (value && LibPhonenumber) {
-    let { phoneNumber } = validatePhoneNumber(value);
-    return phoneNumber;
-  }
-  return "";
-});
-let btnRoundedClassName = $derived.by(() => {
-  if (!appearance || appearance == "normal") {
-    return "rounded-tl-lg rounded-bl-lg";
-  }
-});
-function validatePhoneNumber(number) {
-  try {
-    let parsed = LibPhonenumber?.parsePhoneNumber(number);
-    if (parsed && parsed.isValid()) {
-      return {
-        phoneNumber: parsed.nationalNumber || "",
-        dialCode: formatDialCode(parsed.countryCallingCode)
-      };
-    }
-  } catch (error) {
-  }
-  return {};
-}
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
-function formatDialCode(dialcode) {
-  dialcode = `${dialCode}`.trim();
-  return dialCode.startsWith("+") ? dialcode : `+${dialCode}`;
-}
-async function handleDialCodePicker() {
-  if (EasyCountryData) {
-    let items = EasyCountryData.getCountries();
-    let res = await openPickerDialog({
-      value: dialCode,
-      items,
-      identityFieldName: "dialCode",
-      itemTileSnippet: dialCodePickerItemTile
-    });
-    if (res) {
-      dialCode = res;
-      if (dialCode && phoneNumberValue) {
-        value = `${dialCode}${phoneNumberValue}`;
-      }
-      inputFieldRef && inputFieldRef.focus();
-    }
-  }
-}
-function handleEasyCountryDataScriptLoad(lib) {
-  EasyCountryData = lib;
-}
-function handleLibphonenumberScriptLoad(lib) {
-  LibPhonenumber = lib;
-}
-function handleNumberInput(ev) {
-  let target = ev.target;
-  let text = target?.value || "";
-  let { phoneNumber } = validatePhoneNumber(`${dialCode}${text}`);
-  if (phoneNumber) {
-    value = `${dialCode}${phoneNumber}`;
-  }
-}
-function handleNumberKeyDown(ev) {
-  if (!(ev.key >= "0" && ev.key <= "9" || ev.key === "Backspace" || ev.key === "Delete" || ev.key === "ArrowLeft" || ev.key === "ArrowRight" || ev.key === "ArrowUp" || ev.key === "ArrowDown" || ev.key === "Tab")) {
-    ev.preventDefault();
-  }
-}
+<script module lang="ts">
+	export type LibPhoneNumberParseType = {
+		isValid: () => boolean;
+		nationalNumber: string;
+		countryCallingCode: string;
+	};
+
+	export type LibPhoneNumberType = {
+		parsePhoneNumber: (phoneNumber: string, dialCode?: string) => LibPhoneNumberParseType;
+	};
+
+	export type CountryType = {
+		name: string;
+		dialCode: string;
+		isoCode: string;
+	};
+
+	export type EasyCountryDataType = {
+		getCountries: () => CountryType[];
+		getCountry: (params: { name?: string; dialCode?: string; isoCode?: string }) => CountryType;
+	};
+</script>
+
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import { openPickerDialog } from '../../../../../services';
+	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		id,
+		name,
+		value = $bindable(''),
+		size,
+		appearance,
+		buttonClassName,
+		className,
+		dialCode = $bindable('+1'),
+		floatingLabel,
+		labelClassName,
+		...props
+	}: InputFieldProps & {
+		buttonClassName?: string;
+		dialCode?: string;
+	} = $props();
+
+	let EasyCountryData: EasyCountryDataType;
+	let LibPhonenumber: LibPhoneNumberType | null = $state(null);
+	let inputFieldRef: any | null = $state(null);
+
+	let dailCodeValue = $derived.by(() => {
+		if (value && LibPhonenumber) {
+			let { dialCode } = validatePhoneNumber(value);
+			return dialCode;
+		}
+		return formatDialCode(dialCode);
+	});
+
+	let phoneNumberValue = $derived.by(() => {
+		if (value && LibPhonenumber) {
+			let { phoneNumber } = validatePhoneNumber(value);
+			return phoneNumber;
+		}
+		return '';
+	});
+
+	let btnRoundedClassName = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tl-lg rounded-bl-lg';
+		}
+	});
+
+	function validatePhoneNumber(number: string) {
+		try {
+			let parsed = LibPhonenumber?.parsePhoneNumber(number as string);
+			if (parsed && parsed.isValid()) {
+				return {
+					phoneNumber: parsed.nationalNumber || '',
+					dialCode: formatDialCode(parsed.countryCallingCode)
+				};
+			}
+		} catch (error) {}
+		return {};
+	}
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
+	function formatDialCode(dialcode: string) {
+		dialcode = `${dialCode}`.trim();
+		return dialCode.startsWith('+') ? dialcode : `+${dialCode}`;
+	}
+
+	async function handleDialCodePicker() {
+		if (EasyCountryData) {
+			let items = EasyCountryData.getCountries();
+			let res: string = await openPickerDialog<string>({
+				value: dialCode,
+				items,
+				identityFieldName: 'dialCode',
+				itemTileSnippet: dialCodePickerItemTile
+			});
+
+			if (res) {
+				dialCode = res;
+				if (dialCode && phoneNumberValue) {
+					value = `${dialCode}${phoneNumberValue}`;
+				}
+				inputFieldRef && inputFieldRef.focus();
+			}
+		}
+	}
+
+	function handleEasyCountryDataScriptLoad(lib: EasyCountryDataType) {
+		EasyCountryData = lib;
+	}
+
+	function handleLibphonenumberScriptLoad(lib: LibPhoneNumberType) {
+		LibPhonenumber = lib;
+	}
+
+	function handleNumberInput(ev: InputEvent) {
+		let target: HTMLInputElement = ev.target as HTMLInputElement;
+		let text: string = target?.value || '';
+		let { phoneNumber } = validatePhoneNumber(`${dialCode}${text}`);
+		if (phoneNumber) {
+			value = `${dialCode}${phoneNumber}`;
+		}
+	}
+
+	function handleNumberKeyDown(ev: KeyboardEvent) {
+		if (
+			!(
+				(ev.key >= '0' && ev.key <= '9') ||
+				ev.key === 'Backspace' ||
+				ev.key === 'Delete' ||
+				ev.key === 'ArrowLeft' ||
+				ev.key === 'ArrowRight' ||
+				ev.key === 'ArrowUp' ||
+				ev.key === 'ArrowDown' ||
+				ev.key === 'Tab'
+			)
+		) {
+			ev.preventDefault();
+		}
+	}
 </script>
 
 {#snippet dialCodePickerItemTile(item: any, index: number)}

package/dist/views/core/input/components/radio-field/radio-field.svelte

@@ -1,56 +1,87 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+	export type RadioValuetype = string | boolean | number | Date;
+	export type RadioItem = { value: any; label: string; desc?: string };
+	export type RadioItems = (RadioValuetype | RadioItem)[];
+	export type RadioPosition = 'left' | 'right';
+	export type RadioDiration = 'vertical' | 'horizontal';
+	export type RadioPropsType = {
+		className?: string;
+		groupContainerClassName?: string;
+		hasPrimitiveItemsData?: boolean;
+		id?: string;
+		items?: RadioItems;
+		labelClassName?: string;
+		name?: string;
+		position?: RadioPosition;
+		direction?: RadioDiration;
+		radioContainerClassName?: string;
+		required?: boolean;
+		subtitle?: string;
+		subtitleClassName?: string;
+		title?: string;
+		titleClassName?: string;
+		value?: RadioValuetype;
+		descClassName?: string;
+		onChange?: (value: RadioValuetype) => void;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		direction = 'vertical',
+		className,
+		groupContainerClassName,
+		id,
+		items = [],
+		labelClassName,
+		name,
+		position = 'left',
+		radioContainerClassName,
+		required,
+		subtitle,
+		subtitleClassName,
+		title,
+		titleClassName,
+		value = $bindable(),
+		descClassName,
+		onChange
+	}: RadioPropsType = $props();
+
+	let hasPrimitiveItemsData = $derived.by(() => {
+		if (items?.length) {
+			let item = items[0];
+			if (typeof item === 'object' && item !== null) {
+				return false;
+			}
+		}
+		return true;
+	});
 
-<script lang="ts">let {
-  direction = "vertical",
-  className,
-  groupContainerClassName,
-  id,
-  items = [],
-  labelClassName,
-  name,
-  position = "left",
-  radioContainerClassName,
-  required,
-  subtitle,
-  subtitleClassName,
-  title,
-  titleClassName,
-  value = $bindable(),
-  descClassName,
-  onChange
-} = $props();
-let hasPrimitiveItemsData = $derived.by(() => {
-  if (items?.length) {
-    let item = items[0];
-    if (typeof item === "object" && item !== null) {
-      return false;
-    }
-  }
-  return true;
-});
-let fieldsetId = $derived.by(() => {
-  if (id) {
-    return id;
-  } else {
-    return name;
-  }
-});
-let preparedItems = $derived.by(() => {
-  if (items?.length) {
-    if (hasPrimitiveItemsData) {
-      return items.map((item) => ({ label: item, value: item }));
-    } else {
-      return items;
-    }
-  }
-  return [];
-});
-function handleChange(ev, item) {
-  value = item.value;
-  if (onChange && value) {
-    onChange(value);
-  }
-}
+	let fieldsetId = $derived.by(() => {
+		if (id) {
+			return id;
+		} else {
+			return name;
+		}
+	});
+
+	let preparedItems: RadioItem[] = $derived.by(() => {
+		if (items?.length) {
+			if (hasPrimitiveItemsData) {
+				return items.map((item) => ({ label: item, value: item }) as RadioItem);
+			} else {
+				return items as RadioItem[];
+			}
+		}
+		return [];
+	});
+
+	function handleChange(ev: Event, item: RadioItem) {
+		value = item.value;
+		if (onChange && value) {
+			onChange(value);
+		}
+	}
 </script>
 
 {#snippet labelSnippet(item: RadioItem, index: number)}

package/dist/views/core/input/components/range-field/range-field.svelte

@@ -1,45 +1,69 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let {
-  id,
-  value = $bindable(0),
-  size = "md",
-  min = 0,
-  max = 100,
-  name,
-  step,
-  className,
-  thumbSize = "16px",
-  oninput,
-  onblur,
-  onfocus
-} = $props();
-let rangeSizeClassName = $state("");
-$effect(() => {
-  switch (size) {
-    case "lg":
-      rangeSizeClassName = "h-3 ";
-      break;
-    case "md":
-      rangeSizeClassName = "h-2 ";
-      break;
-    case "sm":
-      rangeSizeClassName = "h-1 ";
-      break;
-    case "xs":
-      rangeSizeClassName = "h-2-px ";
-      break;
-  }
-});
-let inputRef = $state(null);
-export function getElement() {
-  return inputRef;
-}
-export function focus() {
-  return inputRef && inputRef.focus();
-}
-export function select() {
-  return inputRef && inputRef.select();
-}
+<script lang="ts">
+	import InputField, { type InputFieldSize } from '../input-field/input-field.svelte';
+
+	type RangeFieldPropsType = {
+		id?: string;
+		name?: string;
+		className?: string;
+		size?: InputFieldSize;
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		thumbSize?: string;
+		thumbColor?: string;
+		oninput?: (ev: any) => void;
+		onfocus?: (ev: any) => void;
+		onblur?: (ev: any) => void;
+	};
+
+	let {
+		id,
+		value = $bindable(0),
+		size = 'md',
+		min = 0,
+		max = 100,
+		name,
+		step,
+		className,
+		thumbSize = '16px',
+		oninput,
+		onblur,
+		onfocus
+	}: RangeFieldPropsType = $props();
+
+	let rangeSizeClassName = $state('');
+
+	$effect(() => {
+		switch (size) {
+			case 'lg':
+				rangeSizeClassName = 'h-3 ';
+				break;
+			case 'md':
+				rangeSizeClassName = 'h-2 ';
+				break;
+			case 'sm':
+				rangeSizeClassName = 'h-1 ';
+				break;
+			case 'xs':
+				rangeSizeClassName = 'h-2-px ';
+				break;
+		}
+	});
+
+	let inputRef: HTMLInputElement | null = $state(null);
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function focus() {
+		return inputRef && inputRef.focus();
+	}
+
+	export function select() {
+		return inputRef && inputRef.select();
+	}
 </script>
 
 <input
@@ -64,8 +88,7 @@ export function select() {
 	}
 
 	.range-slider {
-		-moz-appearance: none;
-		     appearance: none;
+		appearance: none;
 		-webkit-appearance: none;
 	}
 	.range-slider::-webkit-slider-thumb {

package/dist/views/core/input/components/search-field/search-field.svelte

@@ -1,48 +1,65 @@
-<script lang="ts">import { mdiMagnify } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  className,
-  placeholder,
-  iconClassName,
-  value = $bindable(""),
-  onSearch,
-  ...props
-} = $props();
-const debouncedSearch = debounce(search, 300);
-let lastQuery;
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  inputFieldRef && inputFieldRef.select();
-}
-function handleInput(ev) {
-  let input = ev?.target;
-  if (input) {
-    let searchText = (input.value || "").toLowerCase().trim();
-    debouncedSearch(searchText);
-  }
-}
-function search(query) {
-  if (lastQuery != query) {
-    onSearch && onSearch(query);
-    lastQuery = query;
-  }
-}
-function debounce(func, wait) {
-  let timeout;
-  return function(...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      func(...args);
-    }, wait);
-  };
-}
+<script lang="ts">
+	import { mdiMagnify } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		className,
+		placeholder,
+		iconClassName,
+		value = $bindable(''),
+		onSearch,
+		...props
+	}: InputFieldProps & {
+		iconClassName?: string;
+		onSearch?: (value: string) => void;
+	} = $props();
+
+	const debouncedSearch = debounce(search, 300);
+	let lastQuery: string;
+
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
+	function handleInput(ev: any) {
+		// console.log(ev);
+		let input: HTMLInputElement = ev?.target;
+		if (input) {
+			let searchText = (input.value || '').toLowerCase().trim();
+			debouncedSearch(searchText);
+		}
+	}
+
+	function search(query: string) {
+		if (lastQuery != query) {
+			onSearch && onSearch(query);
+			lastQuery = query;
+		}
+	}
+
+	function debounce<T extends (...args: any[]) => void>(
+		func: T,
+		wait: number
+	): (...args: Parameters<T>) => void {
+		let timeout: ReturnType<typeof setTimeout>;
+
+		return function (...args: Parameters<T>) {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				func(...args);
+			}, wait);
+		};
+	}
 </script>
 
 {#snippet searchIcon()}

package/dist/views/core/input/components/text-field/text-field.svelte

@@ -1,19 +1,24 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let {
-  maxlength,
-  value = $bindable(""),
-  ...props
-} = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-export function getElement() {
-  return inputFieldRef;
-}
-export function select() {
-  return inputFieldRef && inputFieldRef.select();
-}
+<script lang="ts">
+	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+
+	let {
+		maxlength,
+		value = $bindable(''),
+		...props
+	}: InputFieldProps & { value?: string | null | undefined } = $props();
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		return inputFieldRef && inputFieldRef.select();
+	}
 </script>
 
 <InputField