@cloudparker/moldex.js 4.1.6 → 4.1.7

package/dist/views/core/dialog/components/dialog/dialog.svelte.d.ts

@@ -1,92 +0,0 @@
-/**
- * Return a Promise<boolean> value, whic=h will indiacate dialog to close or not.
- * false -> Dont close Dialog
- * true -> Close dialog
- */
-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;
-};
-import { type Component as ComponetType, type Snippet } from 'svelte';
-import { DialogSizeEnum } from '../../../../../services';
-declare const Dialog: ComponetType<DialogProps, {
-    toggleDialog: () => void;
-    openDialog: () => void;
-    closeDialog: (value?: any) => Promise<any>;
-    setResult: (value: any) => void;
-    setOkEnabled: (value: boolean) => void;
-    setOkSpinner: (value: boolean) => void;
-    setOnData: (listener: (data: any) => void) => void;
-    setOnOkClick: (onclick: (event: MouseEvent | TouchEvent, options: DialogExports) => void) => void;
-    setOnCloseClick: (onclick: DialogCloseButtonClickFunction) => void;
-    postData: (data: any) => void;
-    setHeaderSnippet: (snippet: Snippet) => void;
-    setFooterSnippet: (snippet: Snippet) => void;
-    setDialogTitle: (dialogTitle: string) => void;
-}, "">;
-type Dialog = ReturnType<typeof Dialog>;
-export default Dialog;

package/dist/views/core/dialog/components/loading-dialog/loading-dialog.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { Spinner } from '../../../spinner';
-	import type { DialogExports } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		msg?: string;
-		msgClassName?: string;
-		spinnerClassName?: string;
-		containerClassName?: string;
-		className?: string;
-	};
-
-	let {
-		msg = 'Please wait...',
-		msgClassName,
-		spinnerClassName,
-		containerClassName,
-		className,
-		setOnOkClick,
-		setResult,
-		closeDialog,
-		setOnData,
-		...props
-	}: PropsType & DialogExports = $props();
-
-	setOnData((data: any) => {
-		if (data?.msg) {
-			msg = data?.msg || '';
-		}
-	});
-</script>
-
-<div class="p-6 {containerClassName}">
-	<div class="flex items-center gap-4 {className}">
-		<div>
-			<Spinner className={spinnerClassName} />
-		</div>
-		<div class="text-gray-400 {msgClassName}">
-			{@html msg || ''}
-		</div>
-	</div>
-</div>

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

@@ -1,12 +0,0 @@
-import type { DialogExports } from '../dialog/dialog.svelte';
-type PropsType = {
-    msg?: string;
-    msgClassName?: string;
-    spinnerClassName?: string;
-    containerClassName?: string;
-    className?: string;
-};
-type $$ComponentProps = PropsType & DialogExports;
-declare const LoadingDialog: import("svelte").Component<$$ComponentProps, {}, "">;
-type LoadingDialog = ReturnType<typeof LoadingDialog>;
-export default LoadingDialog;

package/dist/views/core/dialog/components/msg-dialog/msg-dialog.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import type { DialogExports } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		className?: string;
-		msg?: string;
-	};
-
-	let { className, msg, setOnOkClick, setResult, closeDialog }: PropsType & DialogExports =
-		$props();
-
-	$effect(() => {
-		setOnOkClick(() => {
-			setResult(true);
-			closeDialog();
-		});
-	});
-</script>
-
-<div class="p-6 text-neutral-800 dark:text-neutral-300 {className}">
-	<div>{@html msg || ''}</div>
-</div>

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

@@ -1,9 +0,0 @@
-import type { DialogExports } from '../dialog/dialog.svelte';
-type PropsType = {
-    className?: string;
-    msg?: string;
-};
-type $$ComponentProps = PropsType & DialogExports;
-declare const MsgDialog: import("svelte").Component<$$ComponentProps, {}, "">;
-type MsgDialog = ReturnType<typeof MsgDialog>;
-export default MsgDialog;

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

@@ -1,57 +0,0 @@
-<script lang="ts">
-	import { showToast } from '../../../../../services';
-	import NumberField from '../../../input/components/number-field/number-field.svelte';
-	import type { DialogExports } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		value?: number;
-		label?: string;
-		name?: string;
-		maxlength?: number;
-		className?: string;
-		autofocus?: boolean;
-		required?: boolean;
-	};
-
-	let {
-		value = $bindable(0),
-		label,
-		name,
-		maxlength,
-		className,
-		autofocus,
-		required,
-		setOnOkClick,
-		setResult,
-		closeDialog,
-		...props
-	}: PropsType & DialogExports = $props();
-
-	let _value: number = $state(value || 0);
-
-	function handleSubmit(ev: SubmitEvent) {
-		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

@@ -1,14 +0,0 @@
-import type { DialogExports } from '../dialog/dialog.svelte';
-type PropsType = {
-    value?: number;
-    label?: string;
-    name?: string;
-    maxlength?: number;
-    className?: string;
-    autofocus?: boolean;
-    required?: boolean;
-};
-type $$ComponentProps = PropsType & DialogExports;
-declare const NumberFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
-type NumberFieldDialog = ReturnType<typeof NumberFieldDialog>;
-export default NumberFieldDialog;

package/dist/views/core/dialog/components/picker-dialog/picker-dialog.svelte

@@ -1,207 +0,0 @@
-<script lang="ts" module>
-	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]>;
-	};
-</script>
-
-<script lang="ts">
-	import { showToast } from '../../../../../services';
-
-	import ButtonListItem from '../../../button/components/button-list-item/button-list-item.svelte';
-	import ButtonSearch from '../../../button/components/button-search/button-search.svelte';
-	import VirtualScrollingList from '../../../common/components/virtual-scrolling/virtual-scrolling-list.svelte';
-	import { mdiCheckCircle, mdiCheckCircleOutline, mdiChevronRight } from '../../../icon';
-	import Icon from '../../../icon/components/icon/icon.svelte';
-	import { onMount, type Snippet } from 'svelte';
-	import { SvelteSet } from 'svelte/reactivity';
-	import type { DialogExports } from '../dialog/dialog.svelte';
-
-	let {
-		value,
-		items = [],
-		multiple = false,
-		identityFieldName = '_id',
-		titleFieldName = 'name',
-		subtitleFieldName,
-		searchFieldName = 'name',
-		hasCheckbox,
-		hasArrow,
-		maxlength = 0,
-		maxlengthMsg = 'Selection limit reached!',
-		checkboxIconPath = mdiCheckCircle,
-		uncheckboxIconPath = mdiCheckCircleOutline,
-		arrowIconPath = mdiChevronRight,
-		checkboxIconClassName = '',
-		uncheckboxIconClassName = '',
-		arrowClassName = '',
-		checkboxClassName = '',
-		isCircularIcon,
-		hasIcon,
-		iconClassName,
-		circularIconClassName,
-		iconPath,
-		itemTileSnippet,
-		closeDialog,
-		setResult,
-		setOnOkClick,
-		setHeaderSnippet,
-		setDialogTitle
-	}: DialogExports & PickerDialogProps = $props();
-
-	let containerHeight: number = $state(0);
-
-	// Reactive store for selected items
-	let selectedSet: SvelteSet<any> = $state(
-		value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
-	);
-
-	let searchText: string = $state('');
-
-	let records: any[] = $derived.by(() => {
-		if (items && typeof items[0] == 'string') {
-			return items.map((name) => {
-				return {
-					[identityFieldName]: name,
-					[titleFieldName]: name
-				};
-			});
-		}
-
-		return [...items];
-	});
-
-	let filteredRecords: any[] = $derived.by(() => {
-		if (searchText) {
-			return records.filter((item) => {
-				return (item[searchFieldName] || '').toLowerCase().indexOf(searchText) >= 0;
-			});
-		}
-		return records;
-	});
-
-	// Handle item selection
-	function handleItemClick(ev: Event, item: any, index: number) {
-		let itemId = item[identityFieldName];
-		// console.log('handleItemClick', { itemId, multiple });
-		if (!multiple) {
-			if (selectedSet.has(itemId)) {
-				selectedSet.delete(itemId);
-				setResult(undefined);
-			} else {
-				selectedSet.add(itemId);
-				setResult(itemId);
-			}
-			closeDialog();
-		} else {
-			// Multiple selection: add/remove item
-			if (selectedSet.has(itemId)) {
-				selectedSet.delete(itemId);
-			} else {
-				if (selectedSet.size >= maxlength) {
-					showToast({ msg: maxlengthMsg });
-				} else {
-					selectedSet.add(itemId);
-				}
-			}
-			if (selectedSet.size) {
-				setDialogTitle(`Selected (${selectedSet.size})`);
-			} else {
-				setDialogTitle('');
-			}
-		}
-	}
-
-	function handleOkClick(ev: MouseEvent | TouchEvent) {
-		if (multiple) {
-			closeDialog(Array.from(selectedSet));
-		}
-	}
-
-	function handleSearch(txt: string) {
-		searchText = txt;
-	}
-
-	onMount(() => {
-		setOnOkClick(handleOkClick);
-		setHeaderSnippet(headerSnippet);
-	});
-</script>
-
-{#snippet headerSnippet()}
-	<ButtonSearch className="rounded-full !p-3 " onSearch={handleSearch} />
-{/snippet}
-
-<div class="mb-4 min-h-96 h-full" bind:clientHeight={containerHeight}>
-	<VirtualScrollingList items={filteredRecords} {containerHeight} itemHeight={56}>
-		{#snippet itemSnippet(item: any, index: number)}
-			{@const isSelected = selectedSet.has(item[identityFieldName])}
-
-			{#if itemTileSnippet}
-				<ButtonListItem onClick={(ev) => handleItemClick(ev, item, index)}>
-					{@render itemTileSnippet(item, index)}
-					{#if hasCheckbox}
-						<div>
-							<Icon
-								path={isSelected ? checkboxIconPath : uncheckboxIconPath}
-								className="w-5 h-5 {checkboxClassName} {isSelected
-									? `text-primary ${checkboxIconClassName}`
-									: `text-neutral-400 ${uncheckboxIconClassName}`}"
-							/>
-						</div>
-					{/if}
-
-					{#if hasArrow}
-						<div>
-							<Icon path={arrowIconPath} className="w-5 h-5 text-neutral-500 {arrowClassName}  " />
-						</div>
-					{/if}
-				</ButtonListItem>
-			{:else}
-				<ButtonListItem
-					className="h-full"
-					onClick={(ev) => handleItemClick(ev, item, index)}
-					title={item[titleFieldName]}
-					subtitle={item[subtitleFieldName || ''] || ''}
-					{hasCheckbox}
-					{hasArrow}
-					isChecked={isSelected}
-					{checkboxIconPath}
-					{uncheckboxIconPath}
-					{checkboxIconClassName}
-					{uncheckboxIconClassName}
-					{checkboxClassName}
-					{arrowIconPath}
-					{arrowClassName}
-					{hasIcon}
-					{isCircularIcon}
-					{circularIconClassName}
-					{iconClassName}
-					{iconPath}
-				/>
-			{/if}
-		{/snippet}
-	</VirtualScrollingList>
-</div>

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

@@ -1,32 +0,0 @@
-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]>;
-};
-import { type Snippet } from 'svelte';
-import type { DialogExports } from '../dialog/dialog.svelte';
-type $$ComponentProps = DialogExports & PickerDialogProps;
-declare const PickerDialog: import("svelte").Component<$$ComponentProps, {}, "">;
-type PickerDialog = ReturnType<typeof PickerDialog>;
-export default PickerDialog;

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

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { showToast } from '../../../../../services';
-	import { TextField } from '../../../input';
-	import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
-	import type { DialogExports } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		value?: InputValue;
-		label?: string;
-		name?: string;
-		maxlength?: number;
-		className?: string;
-		autofocus?: boolean;
-		required?: boolean;
-	};
-
-	let {
-		value = $bindable(''),
-		label,
-		name,
-		maxlength,
-		className,
-		autofocus,
-		required,
-		setOnOkClick,
-		setResult,
-		closeDialog,
-		...props
-	}: PropsType & DialogExports = $props();
-
-	function handleSubmit(ev: SubmitEvent) {
-		ev?.preventDefault();
-		value = ((value as string) || '').trim();
-		if (required && !value) {
-			showToast({ msg: 'This is a required field!' });
-		} else {
-			setResult(value);
-			closeDialog();
-		}
-	}
-</script>
-
-<div class="p-6">
-	<form id="text-field-dialog-form" onsubmit={handleSubmit}>
-		<TextField
-			{...props}
-			{label}
-			{name}
-			{maxlength}
-			{className}
-			{autofocus}
-			{required}
-			bind:value
-		/>
-	</form>
-</div>

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

@@ -1,15 +0,0 @@
-import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
-import type { DialogExports } from '../dialog/dialog.svelte';
-type PropsType = {
-    value?: InputValue;
-    label?: string;
-    name?: string;
-    maxlength?: number;
-    className?: string;
-    autofocus?: boolean;
-    required?: boolean;
-};
-type $$ComponentProps = PropsType & DialogExports;
-declare const TextFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
-type TextFieldDialog = ReturnType<typeof TextFieldDialog>;
-export default TextFieldDialog;

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

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { showToast } from '../../../../../services';
-	import { TextareaField, TextField } from '../../../input';
-	import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
-	import type { DialogExports } from '../dialog/dialog.svelte';
-
-	type PropsType = {
-		value?: InputValue;
-		label?: string;
-		name?: string;
-		maxlength?: number;
-		className?: string;
-		autofocus?: boolean;
-		required?: boolean;
-	};
-
-	let {
-		value = $bindable(''),
-		label,
-		name,
-		maxlength,
-		className,
-		autofocus,
-		required,
-		setOnOkClick,
-		setResult,
-		closeDialog,
-		...props
-	}: PropsType & DialogExports = $props();
-
-	function handleSubmit(ev: SubmitEvent) {
-		ev?.preventDefault();
-		value = ((value as string) || '').trim();
-		if (required && !value) {
-			showToast({ msg: 'This is a required field!' });
-		} else {
-			setResult(value);
-			closeDialog();
-		}
-	}
-</script>
-
-<div class="p-6">
-	<form id="textarea-field-dialog-form" onsubmit={handleSubmit}>
-		<TextareaField
-			{...props}
-			{label}
-			{name}
-			{maxlength}
-			{className}
-			{autofocus}
-			{required}
-			bind:value
-		/>
-	</form>
-</div>

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

@@ -1,15 +0,0 @@
-import type { InputValue } from '../../../input/components/input-field/input-field.svelte';
-import type { DialogExports } from '../dialog/dialog.svelte';
-type PropsType = {
-    value?: InputValue;
-    label?: string;
-    name?: string;
-    maxlength?: number;
-    className?: string;
-    autofocus?: boolean;
-    required?: boolean;
-};
-type $$ComponentProps = PropsType & DialogExports;
-declare const TextareaFieldDialog: import("svelte").Component<$$ComponentProps, {}, "value">;
-type TextareaFieldDialog = ReturnType<typeof TextareaFieldDialog>;
-export default TextareaFieldDialog;

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

@@ -1,4 +0,0 @@
-import type { DialogExports, DialogProps, DialogSize } from './components/dialog/dialog.svelte';
-import Dialog from './components/dialog/dialog.svelte';
-export { Dialog, };
-export type { DialogExports, DialogProps, DialogSize };

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

@@ -1,2 +0,0 @@
-import Dialog from './components/dialog/dialog.svelte';
-export { Dialog, };