@cloudparker/moldex.js 0.0.79 → 0.0.81

package/dist/services/dialog/dialog-service.d.ts

@@ -27,6 +27,9 @@ export declare function openDeleteConfirmDialog({ msg, title, footerOkButtonLabl
     msg?: string;
 }): Promise<unknown>;
 export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }: DialogProps & PickerDialogProps): Promise<R>;
+export declare function openNumberFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
+    fieldClassName?: string;
+}): Promise<unknown>;
 export declare function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
     fieldClassName?: string;
 }): Promise<unknown>;

package/dist/services/dialog/dialog-service.js

@@ -8,6 +8,7 @@ import { isMobileScreen } from '../screen/screen-service';
 import CropperDialog, {} from '../../views/core/dialog/components/cropper-dialog/cropper-dialog.svelte';
 import { processImageFile } from '../utils/image-service';
 import PickerDialog from '../../views/core/dialog/components/picker-dialog/picker-dialog.svelte';
+import NumberFieldDialog from '../../views/core/dialog/components/number-field-dialog/number-field-dialog.svelte';
 function addDialog(props) {
     const dialog = mount(Dialog, { target: document.getElementsByTagName('body')[0], props });
     return dialog;
@@ -104,6 +105,24 @@ export async function openPickerDialog({ items, value, multiple, hasCheckbox = t
         hasFooterCloseButton: multiple,
     });
 }
+export async function openNumberFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params } = {}) {
+    return await openDialog({
+        bodyComponent: NumberFieldDialog,
+        props: { value, label, name, maxlength, className: fieldClassName, autofocus, required, appearance, size, floatingLabel, },
+        ...params,
+        hasHeader: true,
+        hasHeaderBack: isMobileScreen(),
+        hasHeaderClose: !isMobileScreen(),
+        size: isMobileScreen() ? 'full' : 'sm',
+        hasTitle: true,
+        title: title || 'Prompt',
+        hasFooter: true,
+        hasFooterCloseButton: true,
+        hasFooterOkButton: true,
+        footerOkButtonType: 'submit',
+        targetFormId: 'number-field-dialog-form'
+    });
+}
 export async function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params } = {}) {
     return await openDialog({
         bodyComponent: TextFieldDialog,

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

@@ -0,0 +1,42 @@
+<script lang="ts">import { showToast } from "../../../../../services";
+import NumberField from "../../../input/components/number-field/number-field.svelte";
+let {
+  value = $bindable(0),
+  label,
+  name,
+  maxlength,
+  className,
+  autofocus,
+  required,
+  setOnOkClick,
+  setResult,
+  closeDialog,
+  ...props
+} = $props();
+let _value = $state(value || 0);
+function handleSubmit(ev) {
+  ev?.preventDefault();
+  _value = _value || 0;
+  if (required) {
+    showToast({ msg: "This is a required field!" });
+  } else {
+    setResult(_value);
+    closeDialog();
+  }
+}
+</script>
+
+<div class="p-6">
+	<form id="number-field-dialog-form" onsubmit={handleSubmit}>
+		<NumberField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value={_value}
+		/>
+	</form>
+</div>

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

@@ -0,0 +1,27 @@
+import type { DialogExports } from '../dialog/dialog.svelte';
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NumberFieldDialog: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    label?: string;
+    name?: string;
+    maxlength?: number;
+    className?: string;
+    autofocus?: boolean;
+    required?: boolean;
+} & DialogExports, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type NumberFieldDialog = InstanceType<typeof NumberFieldDialog>;
+export default NumberFieldDialog;

package/dist/views/core/text/index.d.ts

@@ -1,10 +1,8 @@
 import TextAwait from "./components/text-await/text-await.svelte";
 import TextCopy from "./components/text-copy/text-copy.svelte";
-import TextCountry from "./components/text-country/text-country.svelte";
-import TextCountryState from "./components/text-country-state/text-country-state.svelte";
 import TextCurrency from "./components/text-currency/text-currency.svelte";
 import TextDate from "./components/text-date/text-date.svelte";
 import TextEmail from "./components/text-email/text-email.svelte";
 import TextHtml from "./components/text-html/text-html.svelte";
 import TextPhone from "./components/text-phone/text-phone.svelte";
-export { TextAwait, TextCopy, TextCountry, TextCountryState, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };
+export { TextAwait, TextCopy, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };

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

@@ -1,10 +1,8 @@
 import TextAwait from "./components/text-await/text-await.svelte";
 import TextCopy from "./components/text-copy/text-copy.svelte";
-import TextCountry from "./components/text-country/text-country.svelte";
-import TextCountryState from "./components/text-country-state/text-country-state.svelte";
 import TextCurrency from "./components/text-currency/text-currency.svelte";
 import TextDate from "./components/text-date/text-date.svelte";
 import TextEmail from "./components/text-email/text-email.svelte";
 import TextHtml from "./components/text-html/text-html.svelte";
 import TextPhone from "./components/text-phone/text-phone.svelte";
-export { TextAwait, TextCopy, TextCountry, TextCountryState, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };
+export { TextAwait, TextCopy, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };

package/dist/views/extra/fields/country-combobox-field.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import ComboboxField from "../../core/input/components/combobox-field/combobox-field.svelte";
+import CountryLoader from "../loaders/country-loader.svelte";
+let {
+  value = $bindable(null),
+  titleFieldName = "name",
+  displayFieldName = "name",
+  searchFieldName = "name",
+  identityFieldName = "isoCode",
+  hasDropdownHeader = true,
+  hasDropdownHeaderSearch = true,
+  hasDropdownFooter = true,
+  hasDropdownFooterCreateButton = true,
+  ...props
+} = $props();
+let countries = $state([]);
+</script>
+
+<CountryLoader bind:countries>
+	<ComboboxField
+		bind:value
+		items={countries}
+		{titleFieldName}
+		{displayFieldName}
+		{searchFieldName}
+		{identityFieldName}
+		{hasDropdownHeader}
+		{hasDropdownHeaderSearch}
+		{hasDropdownFooter}
+		{hasDropdownFooterCreateButton}
+		dropdownFooterClassName="border-t"
+		createButtonClassName="border-primary text-primary hover:text-primary"
+		{...props}
+	/>
+</CountryLoader>

package/dist/views/extra/fields/country-combobox-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ComboboxFieldProps, InputFieldProps } from '../../core';
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CountryComboboxField: $$__sveltets_2_IsomorphicComponent<ComboboxFieldProps & InputFieldProps & {
+    value?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type CountryComboboxField = InstanceType<typeof CountryComboboxField>;
+export default CountryComboboxField;

package/dist/views/extra/index.d.ts

@@ -0,0 +1,6 @@
+import CountryComboboxField from "./fields/country-combobox-field.svelte";
+import TextCountry from "./texts/text-country.svelte";
+import TextCountryState from "./texts/text-country-state.svelte";
+import CountryLoader, { type Country } from "./loaders/country-loader.svelte";
+export type { Country };
+export { CountryComboboxField, TextCountry, CountryLoader, TextCountryState };

package/dist/views/extra/index.js

@@ -0,0 +1,5 @@
+import CountryComboboxField from "./fields/country-combobox-field.svelte";
+import TextCountry from "./texts/text-country.svelte";
+import TextCountryState from "./texts/text-country-state.svelte";
+import CountryLoader, {} from "./loaders/country-loader.svelte";
+export { CountryComboboxField, TextCountry, CountryLoader, TextCountryState };

package/dist/views/extra/loaders/country-loader.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
+let { countries = $bindable([]), onLoad, children } = $props();
+let EasyCountryData;
+export async function loadCountries() {
+  if (EasyCountryData) {
+    countries = EasyCountryData.getCountries();
+    onLoad && onLoad(countries);
+  }
+}
+function handleCountriesLoaded(lib) {
+  EasyCountryData = lib;
+  loadCountries();
+}
+</script>
+
+<EasyScriptLoader
+	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
+	scriptName="EasyCountryData"
+	onLoad={handleCountriesLoaded}
+/>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/views/extra/loaders/country-loader.svelte.d.ts

@@ -0,0 +1,30 @@
+export type Country = {
+    isoCode: string;
+    dialCode: string;
+    name: string;
+};
+import type { Snippet } from 'svelte';
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CountryLoader: $$__sveltets_2_IsomorphicComponent<{
+    countries?: Country[];
+    onLoad?: (countries?: Country[]) => void;
+    children?: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    loadCountries: () => Promise<void>;
+}, "countries">;
+type CountryLoader = InstanceType<typeof CountryLoader>;
+export default CountryLoader;

package/dist/views/{core/text/components/text-country-state → extra/texts}/text-country-state.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
+<script lang="ts">import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
 import { BROWSER } from "esm-env";
 let { input } = $props();
 let states = $state([]);

package/dist/views/{core/text/components/text-country-state → extra/texts}/text-country-state.svelte.d.ts

@@ -1,4 +1,3 @@
-import '../../../../../tailwind.css';
 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;

package/dist/views/extra/texts/text-country.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import CountryLoader, {} from "../loaders/country-loader.svelte";
+let { input } = $props();
+let countries = $state([]);
+let country = $derived.by(() => {
+  if (input && countries?.length) {
+    return countries.find((c) => c.isoCode == input);
+  }
+});
+</script>
+
+<CountryLoader bind:countries>
+    {country?.name || ''}
+</CountryLoader>

package/dist/views/{core/text/components/text-country → extra/texts}/text-country.svelte.d.ts

@@ -1,4 +1,3 @@
-import '../../../../../tailwind.css';
 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;

package/dist/views/index.d.ts

@@ -1 +1,2 @@
 export * from './core/index.js';
+export * from './extra/index.js';

package/dist/views/index.js

@@ -1 +1,2 @@
 export * from './core/index.js';
+export * from './extra/index.js';

package/package.json

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

package/dist/views/core/text/components/text-country/text-country.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
-import { BROWSER } from "esm-env";
-let { input } = $props();
-let countries = $state([]);
-let country = $state(null);
-let EasyCountryData;
-async function init() {
-  if (EasyCountryData) {
-    countries = EasyCountryData.getCountries();
-  }
-}
-function handleScriptLoad(lib) {
-  EasyCountryData = lib;
-  console.log("EasyCountryData", EasyCountryData);
-  init();
-}
-async function prepare(..._) {
-  if (input) {
-    if (countries?.length) {
-      country = countries.find((o) => o.isoCode == input);
-    }
-  } else {
-    country = null;
-  }
-}
-$effect(() => {
-  BROWSER && prepare(input, countries);
-});
-</script>
-
-<EasyScriptLoader
-	scriptName="EasyCountryData"
-	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
-	onLoad={handleScriptLoad}
-/>
-{#if country}
-	<span> {country?.name || ''} </span>
-{/if}