@cloudparker/moldex.js 4.1.6 → 4.1.8

package/dist/views/core/dialog/index.js

@@ -1,2 +1,9 @@
-import Dialog from './components/dialog/dialog.svelte';
-export { Dialog, };
+export { default as CropperDialog } from './components/cropper-dialog/cropper-dialog.svelte';
+export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as LoadingDialog } from './components/loading-dialog/loading-dialog.svelte';
+export { default as MsgDialog } from './components/msg-dialog/msg-dialog.svelte';
+export { default as NumberFieldDialog } from './components/number-field-dialog/number-field-dialog.svelte';
+export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
+export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
+export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
+export * from './types';

package/dist/views/core/dialog/types.d.ts

@@ -0,0 +1,105 @@
+import type { DialogSizeEnum, OutputImageFormats } from "../../../services";
+import type { Snippet } from "svelte";
+export type CropperDialogProps = {
+    outputAspectRatio?: number;
+    outputWidth?: number;
+    outputFormat?: OutputImageFormats;
+    outputQuality?: number;
+    outputType?: 'file' | 'base64';
+    inputImageFile?: File | null;
+    className?: string;
+};
+export type DialogCloseButtonClickFunction = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
+export type DialogSize = DialogSizeEnum.XS | DialogSizeEnum.SM | DialogSizeEnum.MD | DialogSizeEnum.LG | DialogSizeEnum.XL | DialogSizeEnum.FULL;
+export type DialogProps = {
+    backdropClassName?: string;
+    bodyClassName?: string;
+    bodyComponent?: any;
+    cancelable?: boolean;
+    scrollable?: boolean;
+    children?: Snippet;
+    className?: string;
+    component?: any;
+    containerClassName?: string;
+    footerClassName?: string;
+    footerCloseButtonClassName?: string;
+    footerCloseButtonLabel?: string;
+    footerOkButtonClassName?: string;
+    footerOkButtonEnabled?: boolean;
+    footerOkButtonSpinner?: boolean;
+    footerOkButtonType?: 'button' | 'submit' | 'reset';
+    footerOkButtonLabel?: string;
+    hasFooter?: boolean;
+    hasFooterCloseButton?: boolean;
+    hasFooterOkButton?: boolean;
+    hasFooterShadow?: boolean;
+    hasHeader?: boolean;
+    hasHeaderBack?: boolean;
+    hasHeaderClose?: boolean;
+    hasHeaderShadow?: boolean;
+    hasSubtitle?: boolean;
+    hasTitle?: boolean;
+    hasHeaderOkButton?: boolean;
+    headerBackButtonClassName?: string;
+    headerBackIconClassName?: string;
+    headerBackIconPath?: string;
+    headerClassName?: string;
+    headerCloseButtonClassName?: string;
+    headerCloseIconClassName?: string;
+    headerCloseIconPath?: string;
+    headerOkButtonClassName?: string;
+    headerOkButtonLabel?: string;
+    headerOkButtonIconPath?: string;
+    headerOkButtonIconClassName?: string;
+    id?: string;
+    onClose?: () => void;
+    onCloseClick?: DialogCloseButtonClickFunction;
+    onOkClick?: (ev: MouseEvent | TouchEvent, options: DialogExports) => void;
+    onResult?: (value: any) => void;
+    onData?: (data: any) => void;
+    props?: any;
+    size?: DialogSize;
+    targetFormId?: string;
+    subtitle?: string;
+    subtitleClassName?: string;
+    title?: string;
+    titleClassName?: string;
+};
+export type DialogExports = {
+    closeDialog: (result?: any) => void;
+    setResult: (result: any) => void;
+    setOkSpinner: (enable: boolean) => void;
+    setOkEnabled: (enable: boolean) => void;
+    setOnOkClick: (onclick: (ev: MouseEvent | TouchEvent) => void) => void;
+    setOnCloseClick: (onclick: DialogCloseButtonClickFunction) => void;
+    setOnData: (listener: (data: any) => void) => void;
+    setHeaderSnippet: (snippet: Snippet) => void;
+    setFooterSnippet: (snippet: Snippet) => void;
+    setDialogTitle: (title: string) => void;
+};
+export type PickerDialogProps = {
+    items?: string[] | any[];
+    multiple?: boolean;
+    value?: any;
+    identityFieldName?: string;
+    titleFieldName?: string;
+    searchFieldName?: string;
+    subtitleFieldName?: string;
+    hasCheckbox?: boolean;
+    hasArrow?: boolean;
+    maxlength?: number;
+    maxlengthMsg?: string;
+    checkboxIconPath?: string;
+    uncheckboxIconPath?: string;
+    checkboxIconClassName?: string;
+    uncheckboxIconClassName?: string;
+    checkboxClassName?: string;
+    arrowIconPath?: string;
+    arrowClassName?: string;
+    hasIcon?: boolean;
+    iconPath?: string;
+    iconClassName?: string;
+    isCircularIcon?: boolean;
+    circularIconClassName?: string;
+    itemTileSnippet?: Snippet<[item: any, index: number]>;
+};

package/dist/views/core/dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/views/core/input/components/checkbox-field/checkbox-field.svelte.d.ts

@@ -12,8 +12,8 @@ type CheckboxPropsType = {
     value?: boolean;
 };
 declare const CheckboxField: import("svelte").Component<CheckboxPropsType, {
-    getElement: () => HTMLInputElement | null;
-    select: () => void | null;
+    getElement: () => HTMLInputElement;
+    select: () => void;
 }, "value">;
 type CheckboxField = ReturnType<typeof CheckboxField>;
 export default CheckboxField;

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

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { ripple } from '../../../../../actions/ripple.js';
 	import { colorToHex, isValidHexColor } from '../../../../../services/index.js';
-
- 
 	import Icon from '../../../icon/components/icon/icon.svelte';
 	import { mdiSquare } from '../../../icon/index.js';
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
+	import InputField  from '../input-field/input-field.svelte';
 
 	let {
 		id,

package/dist/views/core/input/components/color-field/color-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 type $$ComponentProps = InputFieldProps & {
     value?: string;
 };

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

@@ -1,66 +1,16 @@
-<script module lang="ts">
-	export type ComboboxFieldProps = {
-		chipClassName?: string;
-		comboboxIconClassName?: string;
-		comboboxIconPath?: string;
-		createButtonClassName?: string;
-		createButtonLabel?: string;
-		displayClassName?: string;
-		displayFieldName?: string;
-		displayItemsCount?: number;
-		dropdownBodyClassName?: string;
-		dropdownBodySnippet?: Snippet;
-		dropdownClassName?: string;
-		dropdownFooterClassName?: string;
-		dropdownFooterSnippet?: Snippet;
-		dropdownHeaderClassName?: string;
-		dropdownHeaderSnippet?: Snippet;
-		emptyMessage?: string;
-		emptyMessageSnippet?: Snippet;
-		hasComboboxIcon?: boolean;
-		hasDropdownFooter?: boolean;
-		hasDropdownFooterCreateButton?: boolean;
-		hasDropdownHeader?: boolean;
-		hasDropdownHeaderSearch?: boolean;
-		hasCheckbox?: boolean;
-		iconClassName?: string;
-		iconPathFieldName?: string;
-		identityFieldName?: string;
-		itemClassName?: string;
-		items?: any[];
-		multiple?: boolean;
-		onCreateButtonClick?: (ev: MouseEvent) => void;
-		onSearch?: (value: string) => void;
-		searchClassName?: string;
-		searchFieldName?: string;
-		searchPlaceholder?: string;
-		showChip?: boolean;
-		subtitleClassName?: string;
-		subtitleFieldName?: string;
-		titleClassName?: string;
-		titleFieldName?: string;
-		checkboxIconPath?: string;
-		uncheckboxIconPath?: string;
-		checkboxIconClassName?: string;
-		uncheckboxIconClassName?: string;
-		checkboxClassName?: string;
-		dropPosition?: 'top' | 'bottom' | 'middle';
-		itemTileSnippet?: Snippet<[item: any, index: any]>;
-	};
-</script>
 
 <script lang="ts">
 	import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
 	import Button from '../../../button/components/button/button.svelte';
 	 
+	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiCheckCircle, mdiCheckCircleOutline, mdiUnfoldMoreHorizontal } from '../../../icon/index.js';
 	import NoData from '../../../no-data/components/no-data/no-data.svelte';
-	import type { Snippet } from 'svelte';
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
-	import SearchField from '../search-field/search-field.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
-	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
-	import { mdiCheckCircle, mdiCheckCircleOutline, mdiUnfoldMoreHorizontal } from '../../../icon/index.js';
+	import InputField  from '../input-field/input-field.svelte';
+	import SearchField from '../search-field/search-field.svelte';
+	import type { ComboboxFieldProps, InputFieldProps } from '../../types';
 
 	let {
 		appearance,

package/dist/views/core/input/components/combobox-field/combobox-field.svelte.d.ts

@@ -1,53 +1,4 @@
-export type ComboboxFieldProps = {
-    chipClassName?: string;
-    comboboxIconClassName?: string;
-    comboboxIconPath?: string;
-    createButtonClassName?: string;
-    createButtonLabel?: string;
-    displayClassName?: string;
-    displayFieldName?: string;
-    displayItemsCount?: number;
-    dropdownBodyClassName?: string;
-    dropdownBodySnippet?: Snippet;
-    dropdownClassName?: string;
-    dropdownFooterClassName?: string;
-    dropdownFooterSnippet?: Snippet;
-    dropdownHeaderClassName?: string;
-    dropdownHeaderSnippet?: Snippet;
-    emptyMessage?: string;
-    emptyMessageSnippet?: Snippet;
-    hasComboboxIcon?: boolean;
-    hasDropdownFooter?: boolean;
-    hasDropdownFooterCreateButton?: boolean;
-    hasDropdownHeader?: boolean;
-    hasDropdownHeaderSearch?: boolean;
-    hasCheckbox?: boolean;
-    iconClassName?: string;
-    iconPathFieldName?: string;
-    identityFieldName?: string;
-    itemClassName?: string;
-    items?: any[];
-    multiple?: boolean;
-    onCreateButtonClick?: (ev: MouseEvent) => void;
-    onSearch?: (value: string) => void;
-    searchClassName?: string;
-    searchFieldName?: string;
-    searchPlaceholder?: string;
-    showChip?: boolean;
-    subtitleClassName?: string;
-    subtitleFieldName?: string;
-    titleClassName?: string;
-    titleFieldName?: string;
-    checkboxIconPath?: string;
-    uncheckboxIconPath?: string;
-    checkboxIconClassName?: string;
-    uncheckboxIconClassName?: string;
-    checkboxClassName?: string;
-    dropPosition?: 'top' | 'bottom' | 'middle';
-    itemTileSnippet?: Snippet<[item: any, index: any]>;
-};
-import type { Snippet } from 'svelte';
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { ComboboxFieldProps, InputFieldProps } from '../../types';
 type $$ComponentProps = InputFieldProps & ComboboxFieldProps;
 declare const ComboboxField: import("svelte").Component<$$ComponentProps, {
     focus: () => void;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { dateFormat, toDate } from '../../../../../services/index.js';
-
- 
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
 
 	let {
 		value = $bindable(null),
@@ -15,8 +14,6 @@
 		}
 	});
 
- 
-
 	let inputFieldRef: any | null = $state(null);
 
 	export function focus() {

package/dist/views/core/input/components/date-field/date-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 type $$ComponentProps = InputFieldProps & {
     value?: Date | string | number | null | undefined;
 };

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import InputField  from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
 
 	let { value = $bindable(), ...props }: InputFieldProps = $props();
 

package/dist/views/core/input/components/datetime-field/datetime-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 declare const DatetimeField: import("svelte").Component<InputFieldProps, {
     focus: () => void;
     getElement: () => any;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import InputField  from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
 
 	let { value = $bindable(''), ...props }: InputFieldProps = $props();
 	let inputFieldRef: any | null = $state(null);

package/dist/views/core/input/components/email-field/email-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 declare const EmailField: import("svelte").Component<InputFieldProps, {
     focus: () => void;
     getElement: () => any;

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

@@ -5,7 +5,8 @@
 	 
 	import Icon from '../../../icon/components/icon/icon.svelte';
 	import { mdiAttachment } from '../../../icon/index.js';
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
+	import InputField  from '../input-field/input-field.svelte';
 
 	let {
 		appearance,

package/dist/views/core/input/components/file-field/file-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 type $$ComponentProps = InputFieldProps & {
     accepts?: string;
     multiple?: boolean;

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

@@ -1,87 +1,7 @@
-<script module lang="ts">
-	export type InputFieldSize = 'lg' | 'md' | 'sm' | 'xs';
-	export type InputFieldAppearance =
-		| 'normal'
-		| 'box'
-		| 'fill'
-		| 'underline'
-		| 'fill-underline'
-		| 'none';
-
-	export type InputValue =
-		| any
-		| string
-		| string[]
-		| number
-		| number[]
-		| Date
-		| Date[]
-		| File
-		| File[]
-		| null
-		| undefined;
-
-	export type InputFieldProps = {
-		appearance?: InputFieldAppearance;
-		ariaControls?: string;
-		ariaExpanded?: boolean;
-		autofocus?: boolean;
-		className?: string;
-		cols?: number;
-		containerClassName?: string;
-		contentSnippet?: Snippet;
-		contentSnippetClassName?: string;
-		disabled?: boolean;
-		floatingLabel?: boolean;
-		hasRequiredSymbol?: boolean;
-		iconClassName?: string;
-		iconPath?: string;
-		id?: string;
-		label?: string;
-		labelClassName?: string;
-		leftSnippet?: Snippet;
-		leftSnippetContainerClassName?: string;
-		max?: number | string;
-		maxlength?: number;
-		min?: number | string;
-		minlength?: number;
-		multiple?: boolean;
-		name?: string;
-		title?: string;
-		onBlur?: (ev: any) => void;
-		onChange?: (ev: any) => void;
-		onClick?: (ev: MouseEvent) => void;
-		onDblClick?: (ev: MouseEvent) => void;
-		onDrag?: (ev: DragEvent) => void;
-		onDragOver?: (ev: DragEvent) => void;
-		onDrop?: (ev: DragEvent) => void;
-		onFocus?: (ev: any) => void;
-		onInput?: (ev: any) => void;
-		onKeyDown?: (ev: KeyboardEvent) => void;
-		onKeyPress?: (ev: KeyboardEvent) => void;
-		onKeyUp?: (ev: KeyboardEvent) => void;
-		onMouseDown?: (ev: MouseEvent) => void;
-		onMouseUp?: (ev: MouseEvent) => void;
-		pattern?: string;
-		placeholder?: string;
-		readonly?: boolean;
-		required?: boolean;
-		requiredSymbol?: string;
-		requiredSymbolColor?: string;
-		rightSnippet?: Snippet;
-		rightSnippetContainerClassName?: string;
-		role?: AriaRole;
-		rows?: number;
-		size?: InputFieldSize;
-		step?: number;
-		type?: HTMLInputTypeAttribute | 'textarea';
-		value?: InputValue;
-	};
-</script>
-
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLInputTypeAttribute, AriaRole } from 'svelte/elements';
+	import type { InputFieldProps } from '../../types';
+
+ 
 	import Label from '../label/label.svelte';
 
 	let {

package/dist/views/core/input/components/input-field/input-field.svelte.d.ts

@@ -1,69 +1,9 @@
-export type InputFieldSize = 'lg' | 'md' | 'sm' | 'xs';
-export type InputFieldAppearance = 'normal' | 'box' | 'fill' | 'underline' | 'fill-underline' | 'none';
-export type InputValue = any | string | string[] | number | number[] | Date | Date[] | File | File[] | null | undefined;
-export type InputFieldProps = {
-    appearance?: InputFieldAppearance;
-    ariaControls?: string;
-    ariaExpanded?: boolean;
-    autofocus?: boolean;
-    className?: string;
-    cols?: number;
-    containerClassName?: string;
-    contentSnippet?: Snippet;
-    contentSnippetClassName?: string;
-    disabled?: boolean;
-    floatingLabel?: boolean;
-    hasRequiredSymbol?: boolean;
-    iconClassName?: string;
-    iconPath?: string;
-    id?: string;
-    label?: string;
-    labelClassName?: string;
-    leftSnippet?: Snippet;
-    leftSnippetContainerClassName?: string;
-    max?: number | string;
-    maxlength?: number;
-    min?: number | string;
-    minlength?: number;
-    multiple?: boolean;
-    name?: string;
-    title?: string;
-    onBlur?: (ev: any) => void;
-    onChange?: (ev: any) => void;
-    onClick?: (ev: MouseEvent) => void;
-    onDblClick?: (ev: MouseEvent) => void;
-    onDrag?: (ev: DragEvent) => void;
-    onDragOver?: (ev: DragEvent) => void;
-    onDrop?: (ev: DragEvent) => void;
-    onFocus?: (ev: any) => void;
-    onInput?: (ev: any) => void;
-    onKeyDown?: (ev: KeyboardEvent) => void;
-    onKeyPress?: (ev: KeyboardEvent) => void;
-    onKeyUp?: (ev: KeyboardEvent) => void;
-    onMouseDown?: (ev: MouseEvent) => void;
-    onMouseUp?: (ev: MouseEvent) => void;
-    pattern?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    requiredSymbol?: string;
-    requiredSymbolColor?: string;
-    rightSnippet?: Snippet;
-    rightSnippetContainerClassName?: string;
-    role?: AriaRole;
-    rows?: number;
-    size?: InputFieldSize;
-    step?: number;
-    type?: HTMLInputTypeAttribute | 'textarea';
-    value?: InputValue;
-};
-import type { Snippet } from 'svelte';
-import type { HTMLInputTypeAttribute, AriaRole } from 'svelte/elements';
+import type { InputFieldProps } from '../../types';
 declare const InputField: import("svelte").Component<InputFieldProps, {
     focus: () => void;
-    getElement: () => HTMLInputElement | HTMLTextAreaElement | null;
-    select: () => void | null;
-    getBoundingClientRect: () => DOMRect | undefined;
+    getElement: () => HTMLInputElement | HTMLTextAreaElement;
+    select: () => void;
+    getBoundingClientRect: () => DOMRect;
 }, "value">;
 type InputField = ReturnType<typeof InputField>;
 export default InputField;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
 
 	let { value = $bindable(), ...props }: InputFieldProps = $props();
 

package/dist/views/core/input/components/number-field/number-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 declare const NumberField: import("svelte").Component<InputFieldProps, {
     focus: () => void;
     getElement: () => any;

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { ripple } from '../../../../../actions/ripple.js';
-
- 
 	import Icon from '../../../icon/components/icon/icon.svelte';
 	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon/index.js';
-	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
 
 	let {
 		type = 'password',
@@ -70,8 +69,6 @@
 			type = 'password';
 		}
 	}
-
- 
 </script>
 
 {#snippet showPasswordButton()}

package/dist/views/core/input/components/password-field/password-field.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputFieldProps } from '../input-field/input-field.svelte';
+import type { InputFieldProps } from '../../types';
 type $$ComponentProps = InputFieldProps & {
     buttonClassName?: string;
     iconClassName?: string;

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

@@ -1,31 +1,11 @@
-<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';
+	import InputField  from '../input-field/input-field.svelte';
+	import type { EasyCountryDataType, InputFieldProps, LibPhoneNumberType } from '../../types';
 
 	let {
 		id,
@@ -45,11 +25,11 @@
 	} = $props();
 
 	let EasyCountryData: EasyCountryDataType;
-	let LibPhonenumber: LibPhoneNumberType | null = $state(null);
+	let LibPhoneNumber: LibPhoneNumberType | null = $state(null);
 	let inputFieldRef: any | null = $state(null);
 
 	let dailCodeValue = $derived.by(() => {
-		if (value && LibPhonenumber) {
+		if (value && LibPhoneNumber) {
 			let { dialCode } = validatePhoneNumber(value);
 			return dialCode;
 		}
@@ -57,7 +37,7 @@
 	});
 
 	let phoneNumberValue = $derived.by(() => {
-		if (value && LibPhonenumber) {
+		if (value && LibPhoneNumber) {
 			let { phoneNumber } = validatePhoneNumber(value);
 			return phoneNumber;
 		}
@@ -72,7 +52,7 @@
 
 	function validatePhoneNumber(number: string) {
 		try {
-			let parsed = LibPhonenumber?.parsePhoneNumber(number as string);
+			let parsed = LibPhoneNumber?.parsePhoneNumber(number as string);
 			if (parsed && parsed.isValid()) {
 				return {
 					phoneNumber: parsed.nationalNumber || '',
@@ -124,8 +104,8 @@
 		EasyCountryData = lib;
 	}
 
-	function handleLibphonenumberScriptLoad(lib: LibPhoneNumberType) {
-		LibPhonenumber = lib;
+	function handleLibPhoneNumberScriptLoad(lib: LibPhoneNumberType) {
+		LibPhoneNumber = lib;
 	}
 
 	function handleNumberInput(ev: InputEvent) {
@@ -185,7 +165,7 @@
 <EasyScriptLoader
 	scriptName="libphonenumber"
 	scriptUrl="https://unpkg.com/libphonenumber-js@1.11.7/bundle/libphonenumber-min.js"
-	onLoad={handleLibphonenumberScriptLoad}
+	onLoad={handleLibPhoneNumberScriptLoad}
 />
 
 <InputField