@cloudparker/moldex.js 4.1.21 → 4.1.23

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

@@ -40,16 +40,41 @@ export declare function openNumberFieldDialog({ title, value, label, name, maxle
 export declare function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
     fieldClassName?: string;
 }): Promise<unknown>;
-export declare function openTextareaFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
+export declare function openDateFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
     fieldClassName?: string;
 }): Promise<unknown>;
+export declare function openDateTimeFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
+    fieldClassName?: string;
+    value?: Date | string | null;
+}): Promise<Date>;
+export declare function openTextareaFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params }?: DialogProps & InputFieldProps & {
+    fieldClassName?: string;
+    value?: Date | string | null;
+}): Promise<Date>;
 export declare function openLoadingDialog({ msg, loadingDialogContainerClassName, loadingDialogClassName, loadingDialogSpinnerClassName, loadingDialogMsgClassName, ...params }?: DialogProps & {
     msg?: string;
     loadingDialogContainerClassName?: string;
     loadingDialogClassName?: string;
     loadingDialogSpinnerClassName?: string;
     loadingDialogMsgClassName?: string;
-}): Promise<any>;
+}): Promise<{
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<DialogProps>): void;
+} & {
+    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: import("../../views/index.js").DialogExports) => void) => void;
+    setOnCloseClick: (onclick: import("../../views/index.js").DialogCloseButtonClickFunction) => void;
+    postData: (data: any) => void;
+    setHeaderSnippet: (snippet: import("svelte").Snippet) => void;
+    setFooterSnippet: (snippet: import("svelte").Snippet) => void;
+    setDialogTitle: (dialogTitle: string) => void;
+}>;
 /**
  * Return Cropped Image DataUrl
  * @param props

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

@@ -1,6 +1,6 @@
 import { mount } from 'svelte';
 import { cropImageFile, FilePickerAccepts, ImageCaptureEnum, OutputImageFormatEnum, processImageFile } from '../utils/image-service';
-import { CropperDialog, Dialog, LoadingDialog, MsgDialog, NumberFieldDialog, PickerDialog, TextareaFieldDialog, TextFieldDialog } from '../../views/index.js';
+import { CropperDialog, DateFieldDialog, DatetimeFieldDialog, Dialog, LoadingDialog, MsgDialog, NumberFieldDialog, PickerDialog, TextareaFieldDialog, TextFieldDialog } from '../../views/index.js';
 import { getDialogSize, isMobileScreen } from '../screen/screen-service';
 export var DialogSizeEnum;
 (function (DialogSizeEnum) {
@@ -150,6 +150,42 @@ export async function openTextFieldDialog({ title, value, label, name, maxlength
         targetFormId: 'text-field-dialog-form'
     });
 }
+export async function openDateFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
+    return await openDialog({
+        bodyComponent: DateFieldDialog,
+        props: { value, label, name, maxlength, className: fieldClassName, autofocus, required, appearance, size, floatingLabel, rows },
+        ...params,
+        hasHeader: true,
+        hasHeaderBack: isMobileScreen(),
+        hasHeaderClose: !isMobileScreen(),
+        size: isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
+        hasTitle: true,
+        title: title || 'Prompt',
+        hasFooter: true,
+        hasFooterCloseButton: true,
+        hasFooterOkButton: true,
+        footerOkButtonType: 'submit',
+        targetFormId: 'date-field-dialog-form'
+    });
+}
+export async function openDateTimeFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
+    return await openDialog({
+        bodyComponent: DatetimeFieldDialog,
+        props: { value, label, name, maxlength, className: fieldClassName, autofocus, required, appearance, size, floatingLabel, rows },
+        ...params,
+        hasHeader: true,
+        hasHeaderBack: isMobileScreen(),
+        hasHeaderClose: !isMobileScreen(),
+        size: isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
+        hasTitle: true,
+        title: title || 'Prompt',
+        hasFooter: true,
+        hasFooterCloseButton: true,
+        hasFooterOkButton: true,
+        footerOkButtonType: 'submit',
+        targetFormId: 'datetime-field-dialog-form'
+    });
+}
 export async function openTextareaFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, rows, ...params } = {}) {
     return await openDialog({
         bodyComponent: TextareaFieldDialog,

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

@@ -33,6 +33,7 @@
 		hasOpenInNew,
 		openInNewIconClassName,
 		openInNewIcon = mdiOpenInNew,
+		labelClassName="grow-1",
 		onDblClick,
 		onContextMenu,
 		onDrop,
@@ -98,7 +99,7 @@
 			<Icon path={iconPath} className="w-6 h-6 {iconClassName}" />
 		{/if}
 		{#if label}
-			<span>{label || ''}</span>
+			<span class=" {labelClassName}">{label || ''}</span>
 		{/if}
 		{#if rightIconPath}
 			<Icon path={rightIconPath} className="w-6 h-6 {rightIconClassName}" />

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

@@ -27,6 +27,7 @@ export type ButtonProps = {
     hasOpenInNew?: boolean;
     openInNewIconClassName?: string;
     openInNewIcon?: string;
+    labelClassName?: string;
     onClick?: (ev: MouseEvent) => void;
     onDblClick?: (ev: MouseEvent) => void;
     onContextMenu?: (ev: MouseEvent) => void;

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services/index.js';
+	import type { InputValue } from '../../../input';
+	import DatetimeField from '../../../input/components/datetime-field/datetime-field.svelte';
+	import type { DialogExports } from '../../types';
+
+	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="date-field-dialog-form" onsubmit={handleSubmit}>
+		<DatetimeField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value
+		/>
+	</form>
+</div>

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

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

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { showToast } from '../../../../../services/index.js';
+	import type { InputValue } from '../../../input';
+	import DatetimeField from '../../../input/components/datetime-field/datetime-field.svelte';
+	import type { DialogExports } from '../../types';
+
+	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="datetime-field-dialog-form" onsubmit={handleSubmit}>
+		<DatetimeField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value
+		/>
+	</form>
+</div>

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

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

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

@@ -6,4 +6,6 @@ export { default as NumberFieldDialog } from './components/number-field-dialog/n
 export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
 export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
 export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
+export { default as DateFieldDialog } from './components/date-field-dialog/date-field-dialog.svelte';
+export { default as DatetimeFieldDialog } from './components/datetime-field-dialog/datetime-field-dialog.svelte';
 export * from './types';

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

@@ -6,4 +6,6 @@ export { default as NumberFieldDialog } from './components/number-field-dialog/n
 export { default as PickerDialog } from './components/picker-dialog/picker-dialog.svelte';
 export { default as TextFieldDialog } from './components/text-field-dialog/text-field-dialog.svelte';
 export { default as TextareaFieldDialog } from './components/textarea-field-dialog/textarea-field-dialog.svelte';
+export { default as DateFieldDialog } from './components/date-field-dialog/date-field-dialog.svelte';
+export { default as DatetimeFieldDialog } from './components/datetime-field-dialog/datetime-field-dialog.svelte';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "4.1.21",
+    "version": "4.1.23",
     "keywords": [
         "svelte"
     ],