@cloudparker/moldex.js 0.0.108 → 0.0.109

package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte

@@ -23,7 +23,7 @@ let {
   dropdownCloseClassName = "",
   dropdownOpenClassName = "",
   disabled = false,
-  popup = false,
+  dropUp = false,
   ...others
 } = $props();
 let placement = $state(false);
@@ -47,7 +47,7 @@ function adjustDropdownPosition() {
     const viewportHeight = window.innerHeight;
     const spaceBelow = viewportHeight - rect.bottom;
     const dropdownHeight = 200;
-    if (popup || spaceBelow < dropdownHeight) {
+    if (dropUp || spaceBelow < dropdownHeight) {
       openUpward = rect.top > dropdownHeight;
     } else {
       openUpward = false;

package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonAppearance, type ButtonSize, type ButtonType } from '../button/button.svelte';
 import { type Snippet } from 'svelte';
-type ButtonDropdownProps = {
+export type ButtonDropdownProps = {
     appearance?: ButtonAppearance;
     size?: ButtonSize;
     label?: string;
@@ -15,7 +15,7 @@ type ButtonDropdownProps = {
     dropdownCloseClassName?: string;
     dropdownOpenClassName?: string;
     disabled?: boolean;
-    popup?: boolean;
+    dropUp?: boolean;
 };
 declare const ButtonDropdown: import("svelte").Component<ButtonDropdownProps, {
     toggleDropdown: (ev: MouseEvent | TouchEvent) => void;

package/dist/views/core/button/components/button-menu/button-menu.svelte

@@ -3,7 +3,8 @@
 <script lang="ts">import {
   mdiDotsHorizontal
 } from "../../../../..";
-import ButtonDropdown from "../button-dropdown/button-dropdown.svelte";
+import ButtonDropdown, {
+} from "../button-dropdown/button-dropdown.svelte";
 import Icon from "../../../icon/components/icon/icon.svelte";
 import ButtonListItem from "../button-list-item/button-list-item.svelte";
 let {

package/dist/views/core/button/components/button-menu/button-menu.svelte.d.ts

@@ -10,6 +10,7 @@ export type Menu = {
     isChecked?: boolean;
 };
 import { type ButtonAppearance, type ButtonProps, type ButtonSize } from '../../../../..';
+import { type ButtonDropdownProps } from '../button-dropdown/button-dropdown.svelte';
 import type { Snippet } from 'svelte';
 type Props = {
     label?: string;
@@ -25,7 +26,7 @@ type Props = {
     menuIconClassName?: string;
     disabled?: boolean;
 };
-type $$ComponentProps = ButtonProps & Props;
+type $$ComponentProps = ButtonDropdownProps & ButtonProps & Props;
 declare const ButtonMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type ButtonMenu = ReturnType<typeof ButtonMenu>;
 export default ButtonMenu;

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

@@ -64,6 +64,7 @@ let {
   checkboxIconClassName = "",
   uncheckboxIconClassName = "",
   checkboxClassName = "",
+  dropUp,
   itemTileSnippet,
   onChange,
   ...props
@@ -76,6 +77,7 @@ let windowScrollY = $state(0);
 let isUpward = $derived.by(() => {
   windowScrollY;
   if (!isPlaced) return false;
+  if (dropUp) return true;
   const rect = inputFieldRef.getBoundingClientRect();
   const spaceBelow = window.innerHeight - rect.bottom;
   const spaceAbove = rect.top;
@@ -411,7 +413,7 @@ function handleItemClick(ev, item, index) {
 							label={createButtonLabel}
 							className="px-3 py-1 {createButtonClassName}"
 							onClick={onCreateButtonClick}
-						></Button>
+						/>
 					{/if}
 				</div>
 			{/if}

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

@@ -43,6 +43,7 @@ export type ComboboxFieldProps = {
     checkboxIconClassName?: string;
     uncheckboxIconClassName?: string;
     checkboxClassName?: string;
+    dropUp?: boolean;
     itemTileSnippet?: Snippet<[item: any, index: any]>;
 };
 import type { Snippet } from 'svelte';

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

@@ -1,7 +1,7 @@
 <script module lang="ts"></script>
 
 <script lang="ts">import { ripple } from "../../../../../actions";
-import { getDialogSize, openPickerDialog } from "../../../../../services";
+import { openPickerDialog } from "../../../../../services";
 import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
 import InputField, {} from "../input-field/input-field.svelte";
 let {
@@ -20,30 +20,38 @@ let {
 let EasyCountryData;
 let LibPhonenumber = $state(null);
 let inputFieldRef = $state(null);
-let _dailCode = $state("");
-let _phoneNumber = $state("");
-$effect(() => {
-  if (!_dailCode && !_phoneNumber && LibPhonenumber) {
-    try {
-      if (dialCode) {
-        _dailCode = formatDialCode(dialCode);
-      }
-      if (value) {
-        let parsed = LibPhonenumber?.parsePhoneNumber(value);
-        if (parsed && parsed.isValid()) {
-          _phoneNumber = parsed.nationalNumber || "";
-          _dailCode = formatDialCode(parsed.countryCallingCode);
-        }
-      }
-    } catch (error) {
-    }
+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();
 }
@@ -55,26 +63,22 @@ export function select() {
 }
 function formatDialCode(dialcode) {
   dialcode = `${dialCode}`.trim();
-  if (!dialCode.startsWith("+")) {
-    dialcode = `+${dialCode}`;
-  }
-  return dialcode;
+  return dialCode.startsWith("+") ? dialcode : `+${dialCode}`;
 }
 async function handleDialCodePicker() {
   if (EasyCountryData) {
     let items = EasyCountryData.getCountries();
-    let size2 = getDialogSize();
     let res = await openPickerDialog({
       value: dialCode,
       items,
       identityFieldName: "dialCode",
       itemTileSnippet: dialCodePickerItemTile
     });
-    console.log(res);
     if (res) {
-      _dailCode = res;
-      dialCode = _dailCode;
-      updatePhonenumber(_dailCode, _phoneNumber);
+      dialCode = res;
+      if (dialCode && phoneNumberValue) {
+        value = `${dialCode}${phoneNumberValue}`;
+      }
       inputFieldRef && inputFieldRef.focus();
     }
   }
@@ -87,25 +91,10 @@ function handleLibphonenumberScriptLoad(lib) {
 }
 function handleNumberInput(ev) {
   let target = ev.target;
-  let _phoneNumber2 = target?.value || "";
-  updatePhonenumber(_dailCode, _phoneNumber2);
-}
-function updatePhonenumber(_dialCode, _phoneNumber2) {
-  if (LibPhonenumber) {
-    if (_phoneNumber2) {
-      _dialCode = formatDialCode(_dialCode);
-      try {
-        let parsed = LibPhonenumber.parsePhoneNumber(_dialCode + _phoneNumber2);
-        if (parsed && parsed.isValid()) {
-          dialCode = _dialCode;
-          value = _dialCode + _phoneNumber2;
-        } else {
-          value = "";
-        }
-      } catch (error) {
-        value = "";
-      }
-    }
+  let text = target?.value || "";
+  let { phoneNumber } = validatePhoneNumber(`${dialCode}${text}`);
+  if (phoneNumber) {
+    value = `${dialCode}${phoneNumber}`;
   }
 }
 function handleNumberKeyDown(ev) {
@@ -132,7 +121,7 @@ function handleNumberKeyDown(ev) {
 		use:ripple
 		onclick={handleDialCodePicker}
 	>
-		{_dailCode}
+		{dailCodeValue}
 	</button>
 {/snippet}
 
@@ -151,7 +140,7 @@ function handleNumberKeyDown(ev) {
 <InputField
 	{...props}
 	bind:this={inputFieldRef}
-	value={_phoneNumber}
+	value={phoneNumberValue}
 	type="tel"
 	{id}
 	{name}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.108",
+    "version": "0.0.109",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [