@cloudparker/moldex.js 4.1.7 → 4.1.9

package/dist/views/core/progressbar/components/progressbar/progressbar.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type PropsType = {
+		className?: string;
+		backgroundClassName?: string;
+		value?: number;
+		showValue?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		backgroundClassName = '',
+		className = 'h-4',
+		value = 0,
+		showValue = false,
+		children
+	}: PropsType = $props();
+
+	let progressValue: number = $derived.by(() => {
+		let v = value;
+		if (value < 0) {
+			v = 0;
+		} else if (value >= 100) {
+			v = 100;
+		} else {
+			v = value;
+		}
+		return v;
+	});
+
+</script>
+
+<div class="progressbar-container w-full rounded-full bg-gray-200 {backgroundClassName}" style="">
+	<div
+		class="progressbar rounded-full bg-indigo-600 text-center text-xs text-white transition-all ease-in-out {className}"
+		style="--progressWidth:{progressValue}%;"
+	>
+		{#if children}
+			{@render children()}
+		{:else if showValue && progressValue > 0 && progressValue <= 100}
+			{progressValue}%
+		{/if}
+	</div>
+</div>
+
+<style>
+	.progressbar-container {
+		height: var(--progressHeight);
+	}
+
+	.progressbar {
+		width: var(--progressWidth);
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type PropsType = {
+    className?: string;
+    backgroundClassName?: string;
+    value?: number;
+    showValue?: boolean;
+    children?: Snippet;
+};
+declare const Progressbar: import("svelte").Component<PropsType, {}, "">;
+type Progressbar = ReturnType<typeof Progressbar>;
+export default Progressbar;

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

@@ -0,0 +1,2 @@
+import Progressbar from "./components/progressbar/progressbar.svelte";
+export { Progressbar, };

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

@@ -0,0 +1,2 @@
+import Progressbar from "./components/progressbar/progressbar.svelte";
+export { Progressbar, };

package/dist/views/core/ruler/components/vertical-ruler/verticcal-ruler.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	type PropsType = {
+		className?: string;
+	};
+	let { className = '' }: PropsType = $props();
+</script>
+
+<div class="h-6 lg:w-px lg:bg-gray-200 {className}" aria-hidden="true"></div>

package/dist/views/core/ruler/components/vertical-ruler/verticcal-ruler.svelte.d.ts

@@ -0,0 +1,6 @@
+type PropsType = {
+    className?: string;
+};
+declare const VerticcalRuler: import("svelte").Component<PropsType, {}, "">;
+type VerticcalRuler = ReturnType<typeof VerticcalRuler>;
+export default VerticcalRuler;

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

@@ -0,0 +1,2 @@
+import VerticcalRuler from "./components/vertical-ruler/verticcal-ruler.svelte";
+export { VerticcalRuler, };

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

@@ -0,0 +1,2 @@
+import VerticcalRuler from "./components/vertical-ruler/verticcal-ruler.svelte";
+export { VerticcalRuler, };

package/dist/views/core/screen-detector/components/screen-detector.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { handleScreenSizeUpdate } from '../../../../services/index.js';
+
+	import { onMount } from 'svelte';
+
+	let innerWidth: number = $state(0);
+
+	function screenSizeChanged(size: number) {
+		handleScreenSizeUpdate(size);
+	}
+
+	onMount(() => {
+		screenSizeChanged(innerWidth);
+	});
+</script>
+
+<svelte:window bind:innerWidth />

package/dist/views/core/screen-detector/components/screen-detector.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ScreenDetector: import("svelte").Component<Record<string, never>, {}, "">;
+type ScreenDetector = ReturnType<typeof ScreenDetector>;
+export default ScreenDetector;

package/dist/views/core/screen-detector/index.d.ts

@@ -0,0 +1,2 @@
+import ScreenDetector from "./components/screen-detector.svelte";
+export { ScreenDetector, };

package/dist/views/core/screen-detector/index.js

@@ -0,0 +1,2 @@
+import ScreenDetector from "./components/screen-detector.svelte";
+export { ScreenDetector, };

package/dist/views/core/sidebar/components/sidebar.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+	type PropsType = {
+		children?: Snippet;
+		className?: string;
+		id?: string;
+		responsiveBreakpoint?: BreakpointType;
+		position?: 'left' | 'right';
+	};
+	let {
+		children,
+		className,
+		id,
+		responsiveBreakpoint = 'md',
+		position = 'left'
+	}: PropsType = $props();
+
+	let responsiveClassName = $derived.by(() => {
+		switch (responsiveBreakpoint) {
+			case 'xs':
+				return 'xs:fixed xs:inset-y-0 xs:flex xs:w-72 xs:flex-col';
+			case 'sm':
+				return 'sm:fixed sm:inset-y-0 sm:flex sm:w-72 sm:flex-col';
+			case 'md':
+				return 'md:fixed md:inset-y-0 md:flex md:w-72 md:flex-col';
+			case 'lg':
+				return 'lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col';
+			case 'xl':
+				return 'xl:fixed xl:inset-y-0 xl:flex xl:w-72 xl:flex-col';
+			case '2xl':
+				return '2xl:fixed 2xl:inset-y-0 2xl:flex 2xl:w-72 2xl:flex-col';
+		}
+	});
+</script>
+
+<div
+	{id}
+	class="hidden bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 border-neutral-100 dark:border-neutral-700 pt-16 {responsiveClassName} {position ==
+	'right'
+		? 'right-0'
+		: ''} {className}"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type PropsType = {
+    children?: Snippet;
+    className?: string;
+    id?: string;
+    responsiveBreakpoint?: BreakpointType;
+    position?: 'left' | 'right';
+};
+declare const Sidebar: import("svelte").Component<PropsType, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

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

@@ -0,0 +1,2 @@
+import Sidebar from "./components/sidebar.svelte";
+export { Sidebar };

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

@@ -0,0 +1,2 @@
+import Sidebar from "./components/sidebar.svelte";
+export { Sidebar };

package/dist/views/core/spinner/components/spinner/spinner.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	type PropsType = {
+		className?: string;
+	};
+
+	let { className = '' }: PropsType = $props();
+</script>
+
+<svg
+	class="animate-spin h-5 w-5 text-primary {className}"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+>
+	<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+	<path
+		class="opacity-75"
+		fill="currentColor"
+		d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	></path>
+</svg>

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

@@ -0,0 +1,6 @@
+type PropsType = {
+    className?: string;
+};
+declare const Spinner: import("svelte").Component<PropsType, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

@@ -0,0 +1,2 @@
+import Spinner from "./components/spinner/spinner.svelte";
+export { Spinner };

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

@@ -0,0 +1,2 @@
+import Spinner from "./components/spinner/spinner.svelte";
+export { Spinner };

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	type PropsType = {
+		input?: Promise<any | null> | undefined;
+		key?: string;
+		hasTitle?: string;
+		placeholder?: string;
+		emptyText?: string;
+	};
+	let { input, key, hasTitle, placeholder, emptyText = '-' }: PropsType = $props();
+</script>
+
+{#if input}
+	{#await input}
+		<span>{@html placeholder}</span>
+	{:then res}
+		{#if res}
+			{@const text = res && key ? res[key] : res}
+			<span title={hasTitle ? text : ''}> {text}</span>
+		{:else}
+			<span>{emptyText}</span>
+		{/if}
+	{/await}
+{/if}

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

@@ -0,0 +1,10 @@
+type PropsType = {
+    input?: Promise<any | null> | undefined;
+    key?: string;
+    hasTitle?: string;
+    placeholder?: string;
+    emptyText?: string;
+};
+declare const TextAwait: import("svelte").Component<PropsType, {}, "">;
+type TextAwait = ReturnType<typeof TextAwait>;
+export default TextAwait;

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Button from '../../../button/components/button/button.svelte';
+	import {   copyToClipboard, showToast } from '../../../../../services/index.js';
+	import { mdiContentCopy } from '../../../icon';
+
+	type PropsType = {
+		input: string;
+		containerClassName?: string;
+		buttonClassName?: string;
+		iconClassName?: string;
+		iconPath?: string;
+	};
+
+	let {
+		input,
+		containerClassName = '',
+		buttonClassName = '',
+		iconClassName = '',
+		iconPath = mdiContentCopy
+	}: PropsType = $props();
+
+	function handleCopy() {
+		if (input) {
+			copyToClipboard(input);
+			showToast('Copied!');
+		}
+	}
+</script>
+
+<span class="flex items-center {containerClassName}">
+	<span>{input || ''}</span>
+	{#if input}
+		<Button
+			onClick={handleCopy}
+			className="ms-1 p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100 {buttonClassName}"
+			iconClassName="w-4 h-4 {iconClassName}"
+			{iconPath}
+		/>
+	{/if}
+</span>

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

@@ -0,0 +1,10 @@
+type PropsType = {
+    input: string;
+    containerClassName?: string;
+    buttonClassName?: string;
+    iconClassName?: string;
+    iconPath?: string;
+};
+declare const TextCopy: import("svelte").Component<PropsType, {}, "">;
+type TextCopy = ReturnType<typeof TextCopy>;
+export default TextCopy;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { CurrencySymbols } from '../../../../../services';
+
+	type Props = {
+		input: number;
+		symbol?: CurrencySymbols | string;
+		hasSymbol?: boolean;
+		empty?: string;
+		decimal?: number;
+	};
+
+	let { input, symbol = '$', hasSymbol = true, empty = '-', decimal = 2 }: Props = $props();
+	let value: string = $derived(Math.abs(input || 0).toFixed(decimal));
+</script>
+
+<span class="text-nowrap">
+	{#if (input || 0) < 0}
+		{empty}
+	{/if}
+	{#if hasSymbol}
+		{symbol || ''}
+	{/if}
+	{value || ''}
+</span>

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

@@ -0,0 +1,11 @@
+import type { CurrencySymbols } from '../../../../../services';
+type Props = {
+    input: number;
+    symbol?: CurrencySymbols | string;
+    hasSymbol?: boolean;
+    empty?: string;
+    decimal?: number;
+};
+declare const TextCurrency: import("svelte").Component<Props, {}, "">;
+type TextCurrency = ReturnType<typeof TextCurrency>;
+export default TextCurrency;

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { dateFormat, dateToAgo, toDate } from '../../../../../services/index.js';
+
+ 
+
+	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
+
+	type PropsType = {
+		input: Date | number | string | { seconds: number; nanoseconds: number };
+		format?: 'ago' | string;
+	};
+
+	let { input, format = 'DD-MM-YYYY hh:mm a' }: PropsType = $props();
+
+	let dateString: string = $state('');
+
+	function prepareDate(..._: any) {
+		// console.log('date data', data);
+		let date: Date | undefined;
+		if (input) {
+			date = toDate(input);
+		}
+		if (date) {
+			if (format == 'ago') {
+				dateString = dateToAgo(date)!;
+			} else {
+				dateString = dateFormat(date, format)!;
+			}
+		}
+	}
+
+	onMount(() => {
+		prepareDate(input);
+	});
+</script>
+
+<span>
+	{dateString || ''}
+</span>

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

@@ -0,0 +1,10 @@
+type PropsType = {
+    input: Date | number | string | {
+        seconds: number;
+        nanoseconds: number;
+    };
+    format?: 'ago' | string;
+};
+declare const TextDate: import("svelte").Component<PropsType, {}, "">;
+type TextDate = ReturnType<typeof TextDate>;
+export default TextDate;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import { Icon, mdiEmailOutline } from '../../../icon';
+	 
+	type PropsType = {
+		input: string;
+		buttonClassName?: string;
+		iconPath?: string;
+		iconClassName?: string;
+	};
+
+	let { input, buttonClassName, iconClassName, iconPath = mdiEmailOutline }: PropsType = $props();
+</script>
+
+<span class="flex items-center">
+	<span>{input || ''}</span>
+	{#if input}
+		<a class="ms-1 p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100  {buttonClassName}" href="mailto:{input}" use:ripple>
+			<Icon path={iconPath} className="w-4 h-4 {iconClassName}" />
+		</a>
+	{/if}
+</span>

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

@@ -0,0 +1,9 @@
+type PropsType = {
+    input: string;
+    buttonClassName?: string;
+    iconPath?: string;
+    iconClassName?: string;
+};
+declare const TextEmail: import("svelte").Component<PropsType, {}, "">;
+type TextEmail = ReturnType<typeof TextEmail>;
+export default TextEmail;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { input }: { input: string } = $props();
+</script>
+
+<span>
+	{@html input || ''}
+</span>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    input: string;
+};
+declare const TextHtml: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextHtml = ReturnType<typeof TextHtml>;
+export default TextHtml;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { mdiPhone } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+
+	type PropsType = {
+		input: string;
+		buttonClassName?: string;
+		iconPath?: string;
+		iconClassName?: string;
+	};
+
+	let { input, buttonClassName, iconClassName, iconPath = mdiPhone }: PropsType = $props();
+</script>
+
+<span class="flex items-center">
+	<span>{input || ''}</span>
+	{#if input}
+		<a
+			class="ms-1 p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100 {buttonClassName}"
+			href="tel:{input}"
+		>
+			<Icon path={iconPath} className="w-4 h-4 {iconClassName} " />
+		</a>
+	{/if}
+</span>

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

@@ -0,0 +1,9 @@
+type PropsType = {
+    input: string;
+    buttonClassName?: string;
+    iconPath?: string;
+    iconClassName?: string;
+};
+declare const TextPhone: import("svelte").Component<PropsType, {}, "">;
+type TextPhone = ReturnType<typeof TextPhone>;
+export default TextPhone;

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

@@ -0,0 +1,8 @@
+import TextAwait from "./components/text-await/text-await.svelte";
+import TextCopy from "./components/text-copy/text-copy.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, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };

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

@@ -0,0 +1,8 @@
+import TextAwait from "./components/text-await/text-await.svelte";
+import TextCopy from "./components/text-copy/text-copy.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, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };

package/dist/views/core/toast/components/toast/toast.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { ToastPropsType } from '../../types';
+
+	let isPlaced: boolean = $state(false);
+	let isOpened: boolean = $state(false);
+
+	let { id, msg, duration = 3000, className, children }: ToastPropsType = $props();
+
+	export function openToast() {
+		isPlaced = true;
+		setTimeout(() => {
+			isOpened = true;
+			setTimeout(() => {
+				closeClose();
+			}, duration);
+		}, 0);
+	}
+
+	export function closeClose() {
+		isOpened = false;
+		setTimeout(() => {
+			isPlaced = false;
+		}, 300);
+	}
+</script>
+
+{#if isPlaced}
+	<div
+		{id}
+		class="fixed bottom-20 left-1/2 max-w-full -translate-x-1/2 transform rounded-full bg-white p-3 px-6 text-gray-700 shadow-xl transition-opacity duration-300 dark:bg-neutral-600 dark:text-neutral-300 dark:shadow-neutral-700 {isOpened
+			? 'opacity-100'
+			: 'opacity-0'} toast {className}"
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{@html msg}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.toast {
+		z-index: 1000;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { ToastPropsType } from '../../types';
+declare const Toast: import("svelte").Component<ToastPropsType, {
+    openToast: () => void;
+    closeClose: () => void;
+}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

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

@@ -0,0 +1,3 @@
+import Toast from './components/toast/toast.svelte';
+export * from './types';
+export { Toast };

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

@@ -0,0 +1,3 @@
+import Toast from './components/toast/toast.svelte';
+export * from './types';
+export { Toast };

package/dist/views/core/toast/types.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export type ToastPropsType = {
+    id?: string;
+    msg: string;
+    duration?: number;
+    className?: string;
+    children?: Snippet;
+};

package/dist/views/core/toast/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { ComboboxFieldProps, InputFieldProps } from '../../core';
+	import ComboboxField from '../../core/input/components/combobox-field/combobox-field.svelte';
+	import CountryLoader from '../loaders/country-loader.svelte';
+
+	type Props = {
+		value?: any;
+	};
+
+	let {
+		value = $bindable(null),
+		titleFieldName = 'name',
+		displayFieldName = 'name',
+		searchFieldName = 'name',
+		identityFieldName = 'isoCode',
+		hasDropdownHeader = true,
+		hasDropdownHeaderSearch = true,
+		hasDropdownFooter = true,
+		hasDropdownFooterCreateButton = true,
+		...props
+	}: ComboboxFieldProps & InputFieldProps & Props = $props();
+
+	let countries: any[] = $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>