@cloudparker/moldex.js 4.1.7 → 4.1.9

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

@@ -0,0 +1,187 @@
+ 
+
+<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';
+	import type { EasyCountryDataType, InputFieldProps, LibPhoneNumberType } from '../../types';
+
+	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)}
+	<div class="w-14 text-sm font-bold text-neutral">
+		{item.dialCode}
+	</div>
+	<div class="flex-grow">
+		{item.name}
+	</div>
+{/snippet}
+
+{#snippet showDialCodeButton()}
+	<button
+		id="btn-dialcode-picker-{name || id}"
+		type="button"
+		class="w-16 h-full hover:bg-gray-100 font-bold text-gray-400 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
+		use:ripple
+		onclick={handleDialCodePicker}
+	>
+		{dailCodeValue}
+	</button>
+{/snippet}
+
+<EasyScriptLoader
+	scriptName="EasyCountryData"
+	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
+	onLoad={handleEasyCountryDataScriptLoad}
+/>
+
+<EasyScriptLoader
+	scriptName="libphonenumber"
+	scriptUrl="https://unpkg.com/libphonenumber-js@1.11.7/bundle/libphonenumber-min.js"
+	onLoad={handleLibPhoneNumberScriptLoad}
+/>
+
+<InputField
+	{...props}
+	bind:this={inputFieldRef}
+	value={phoneNumberValue}
+	type="tel"
+	{id}
+	{name}
+	maxlength={props?.maxlength || 12}
+	leftSnippet={showDialCodeButton}
+	{size}
+	{appearance}
+	{floatingLabel}
+	className="pl-16  {className}"
+	labelClassName=" {floatingLabel ? 'peer-placeholder-shown:ps-16' : ''} {labelClassName}"
+	onInput={handleNumberInput}
+	onKeyDown={handleNumberKeyDown}
+/>

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

@@ -0,0 +1,12 @@
+import type { InputFieldProps } from '../../types';
+type $$ComponentProps = InputFieldProps & {
+    buttonClassName?: string;
+    dialCode?: string;
+};
+declare const PhoneField: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => void;
+}, "value" | "dialCode">;
+type PhoneField = ReturnType<typeof PhoneField>;
+export default PhoneField;

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

@@ -0,0 +1,127 @@
+ 
+
+<script lang="ts">
+	import type { RadioItem, RadioPropsType } from '../../types';
+
+	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;
+	});
+
+	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)}
+	<div class="leading-6">
+		<div class="ml-4 block text-sm font-medium text-gray-900 flex-grow {labelClassName}">
+			{item.label || ''}
+		</div>
+		{#if item.desc}
+			<div class="ml-4 block text-xs text-gray-500 flex-grow {descClassName}">
+				{item.desc || ''}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<fieldset id={fieldsetId}>
+	{#if title}
+		<legend
+			class="text-sm font-semibold leading-6 text-gray-900 {required
+				? 'required'
+				: ''} {titleClassName}">{title}</legend
+		>
+	{/if}
+	{#if subtitle}
+		<p class="mt-1 text-sm leading-6 text-gray-600 {subtitleClassName}">{subtitle}</p>
+	{/if}
+
+	<div
+		class="{title || subtitle ? 'mt-6' : ''} {direction == 'vertical'
+			? 'space-y-4'
+			: 'space-x-6 flex items-center'} {groupContainerClassName} "
+	>
+		{#each preparedItems || [] as item, index}
+			<label
+				class="flex items-center cursor-pointer select-none {radioContainerClassName}"
+				for="option-{index}"
+			>
+				{#if position == 'right'}
+					{@render labelSnippet(item, index)}
+				{/if}
+
+				<input
+					id="option-{index}"
+					{name}
+					type="radio"
+					value={item.value}
+					checked={value === item.value}
+					class="h-6 w-6 appearance-none rounded-full bg-neutral-200 dark:bg-neutral-700 dark:checked:bg-primary checked:bg-primary checked:hover:bg-primary checked:focus:bg-primary focus:ring-primary focus:shadow-primary outline-primary border-neutral-300 dark:border-neutral-600 {className}"
+					onchange={(ev) => handleChange(ev, item)}
+				/>
+
+				{#if position == 'left'}
+					{@render labelSnippet(item, index)}
+				{/if}
+			</label>
+		{/each}
+	</div>
+</fieldset>
+
+<style>
+	[type='radio']:checked {
+		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+		background-size: 100% 100%;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { RadioPropsType } from '../../types';
+declare const RadioField: import("svelte").Component<RadioPropsType, {}, "value">;
+type RadioField = ReturnType<typeof RadioField>;
+export default RadioField;

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { InputFieldSize } from "../../types";
+
+
+	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 = $derived.by(() => {
+		let className = '';
+		switch (size) {
+			case 'lg':
+				className = 'h-3 ';
+				break;
+			case 'md':
+				className = 'h-2 ';
+				break;
+			case 'sm':
+				className = 'h-1 ';
+				break;
+			case 'xs':
+				className = 'h-2-px ';
+				break;
+		}
+		return className;
+	});
+
+	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
+	bind:this={inputRef}
+	bind:value
+	{id}
+	{name}
+	type="range"
+	class="range-slider range-lg w-full cursor-pointer appearance-none rounded-lg bg-gray-200 outline-none focus:outline-none dark:bg-gray-700 {rangeSizeClassName} {className}"
+	{min}
+	{max}
+	{step}
+	style="--thumbSize: {thumbSize};"
+	{oninput}
+	{onfocus}
+	{onblur}
+/>
+
+<style>
+	.h-2-px {
+		height: 2px;
+	}
+
+	.range-slider {
+		appearance: none;
+		-webkit-appearance: none;
+	}
+	.range-slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: var(--thumbSize);
+		height: var(--thumbSize);
+		background-color: var(--color-primary-600);
+		border-radius: 50%;
+	}
+
+	/* Thumb styling for Firefox */
+	.range-slider::-moz-range-thumb {
+		-moz-appearance: none;
+		width: var(--thumbSize);
+		height: var(--thumbSize);
+		background-color: var(--color-primary-600);
+		border-radius: 50%;
+	}
+
+	/* Thumb styling for Edge */
+	.range-slider::-ms-thumb {
+		-ms-appearance: none;
+		width: var(--thumbSize);
+		height: var(--thumbSize);
+		background-color: var(--color-primary-600);
+		border-radius: 50%;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import type { InputFieldSize } from "../../types";
+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;
+};
+declare const RangeField: import("svelte").Component<RangeFieldPropsType, {
+    getElement: () => HTMLInputElement;
+    focus: () => void;
+    select: () => void;
+}, "value">;
+type RangeField = ReturnType<typeof RangeField>;
+export default RangeField;

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	 
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiMagnify } from '../../../icon/index.js';
+	import type { InputFieldProps } from '../../types';
+	import InputField 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()}
+	<Icon path={mdiMagnify} className="mx-3 text-gray-400 {iconClassName}"></Icon>
+{/snippet}
+<InputField
+	bind:value
+	bind:this={inputFieldRef}
+	{...props}
+	type="search"
+	maxlength={props?.maxlength || 200}
+	leftSnippet={searchIcon}
+	className="pl-12 {className}"
+	{placeholder}
+	onInput={handleInput}
+/>

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

@@ -0,0 +1,12 @@
+import type { InputFieldProps } from '../../types';
+type $$ComponentProps = InputFieldProps & {
+    iconClassName?: string;
+    onSearch?: (value: string) => void;
+};
+declare const SearchField: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => void;
+}, "value">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { InputFieldProps } from '../../types';
+	import InputField 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
+	{...props}
+	bind:value={value as string | null | undefined}
+	bind:this={inputFieldRef}
+	type="text"
+	maxlength={maxlength || 200}
+/>

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

@@ -0,0 +1,11 @@
+import type { InputFieldProps } from '../../types';
+type $$ComponentProps = InputFieldProps & {
+    value?: string | null | undefined;
+};
+declare const TextField: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => any;
+}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
+
+	let { value = $bindable(''), ...props }: InputFieldProps = $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
+	bind:this={inputFieldRef}
+	{...props}
+	type="textarea"
+	maxlength={props?.maxlength || 300}
+	bind:value
+/>

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

@@ -0,0 +1,8 @@
+import type { InputFieldProps } from '../../types';
+declare const TextareaField: import("svelte").Component<InputFieldProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => any;
+}, "value">;
+type TextareaField = ReturnType<typeof TextareaField>;
+export default TextareaField;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
+
+	let { value = $bindable(), ...props }: InputFieldProps = $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 bind:this={inputFieldRef} {...props} type="time" bind:value />

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

@@ -0,0 +1,8 @@
+import type { InputFieldProps } from '../../types';
+declare const TimeField: import("svelte").Component<InputFieldProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => any;
+}, "value">;
+type TimeField = ReturnType<typeof TimeField>;
+export default TimeField;