@cloudparker/moldex.js 4.1.5 → 4.1.7

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

@@ -1,103 +0,0 @@
-<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';
-
-	let {
-		type = 'password',
-		size,
-		appearance,
-		buttonClassName,
-		iconClassName,
-		name,
-		id,
-		value = $bindable(),
-		...props
-	}: InputFieldProps & {
-		buttonClassName?: string;
-		iconClassName?: string;
-	} = $props();
-
-	let btnRoundedClassName = $derived.by(() => {
-		if (!appearance || appearance == 'normal') {
-			return 'rounded-tr-lg rounded-br-lg';
-		}
-		return '';
-	});
-
-	let btnIconSizeClassName = $derived.by(() => {
-		let className = '';
-		if (size) {
-			switch (size) {
-				case 'lg':
-					className = '!h-7 !w-7';
-					break;
-				case 'md':
-					className = '!h-6 !w-6';
-					break;
-				case 'sm':
-					className = '!h-5 !w-5';
-					break;
-				case 'xs':
-					className = '!h-4 !w-4';
-					break;
-			}
-		}
-		return className;
-	});
-
-	let inputFieldRef: any | null = $state(null);
-
-	export function focus() {
-		inputFieldRef?.focus();
-	}
-
-	export function getElement() {
-		return inputFieldRef;
-	}
-
-	export function select() {
-		inputFieldRef && inputFieldRef.select();
-	}
-
-	function handleTogglePassword() {
-		if (type == 'password') {
-			type = 'text';
-		} else {
-			type = 'password';
-		}
-	}
-
- 
-</script>
-
-{#snippet showPasswordButton()}
-	<button
-		id="btn-eye-{name || id}"
-		type="button"
-		class="h-full px-3 hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
-		use:ripple
-		onclick={handleTogglePassword}
-	>
-		<Icon
-			path={type == 'password' ? mdiEyeOffOutline : mdiEyeOutline}
-			className=" {btnIconSizeClassName} {iconClassName}"
-		/>
-	</button>
-{/snippet}
-
-<InputField
-	bind:this={inputFieldRef}
-	{...props}
-	{type}
-	{id}
-	{name}
-	maxlength={props?.maxlength || 200}
-	rightSnippet={showPasswordButton}
-	{size}
-	{appearance}
-	bind:value
-/>

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

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

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

@@ -1,207 +0,0 @@
-<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)}
-	<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

@@ -1,33 +0,0 @@
-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;
-};
-import { type InputFieldProps } from '../input-field/input-field.svelte';
-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

@@ -1,151 +0,0 @@
-<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;
-	});
-
-	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

@@ -1,32 +0,0 @@
-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;
-};
-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

@@ -1,119 +0,0 @@
-<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 = $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

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