@cloudparker/moldex.js 0.0.84 → 0.0.85

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

@@ -1,6 +1,15 @@
-import { type DialogProps, type InputFieldProps } from '../../views';
+import { type DialogProps, type DialogSize, type InputFieldProps } from '../../views';
 import { type CropperDialogPropsType } from '../../views/core/dialog/components/cropper-dialog/cropper-dialog.svelte';
 import type { PickerDialogProps } from '../../views/core/dialog/components/picker-dialog/picker-dialog.svelte';
+import { type ImageCapttures, type OutputImageFormats } from '../utils/image-service';
+export declare enum DialogSizeEnum {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    FULL = "full"
+}
 export type PickerDialogPropsType = {
     items?: any[];
     itemTitle?: string;
@@ -65,7 +74,7 @@ export declare function openLoadingDialog({ msg, loadingDialogContainerClassName
  * @param props
  * @returns
  */
-export declare function openCropperDialog<T, R>({ outputWidth, outputFormat, outputQuality, outputType, inputImageFile, className, ...params }: DialogProps & CropperDialogPropsType): Promise<R | string | File>;
+export declare function openCropperDialog<T, R>({ outputWidth, outputFormat, outputQuality, outputType, inputImageFile, className, outputAspectRatio, ...params }: DialogProps & CropperDialogPropsType): Promise<R | string | File>;
 /**
  * Opens a file picker dialog and returns the selected file or files.
  * This function uses native browser APIs to ensure compatibility across different browsers.
@@ -85,10 +94,17 @@ export declare function openFilePickerDialog<T extends File | File[]>(accepts?:
  */
 export declare function openImagePickerDialog<T extends File | File[]>(accepts?: string | string[], options?: {
     multiple?: boolean;
-    capture?: 'user' | 'environment';
+    capture?: ImageCapttures;
     maxWidth?: number;
     maxHeight?: number;
     maxSizeInBytes?: number;
-    outputFormat?: 'image/webp' | 'image/jpeg' | 'image/png';
+    outputFormat?: OutputImageFormats;
     quality?: number;
 }): Promise<T | null>;
+export declare function openImagePickerDialogWithCropper({ outputFormat, outputWidth, outputQuality, outputAspectRatio, dialogSize, }?: {
+    outputFormat?: OutputImageFormats;
+    outputWidth?: number;
+    outputQuality?: number;
+    outputAspectRatio?: number;
+    dialogSize?: DialogSize;
+}): Promise<File | null>;

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

@@ -1,14 +1,23 @@
 import { Dialog } from '../../views';
+import CropperDialog, {} from '../../views/core/dialog/components/cropper-dialog/cropper-dialog.svelte';
 import LoadingDialog from '../../views/core/dialog/components/loading-dialog/loading-dialog.svelte';
 import MsgDialog from '../../views/core/dialog/components/msg-dialog/msg-dialog.svelte';
+import NumberFieldDialog from '../../views/core/dialog/components/number-field-dialog/number-field-dialog.svelte';
+import PickerDialog from '../../views/core/dialog/components/picker-dialog/picker-dialog.svelte';
 import TextFieldDialog from '../../views/core/dialog/components/text-field-dialog/text-field-dialog.svelte';
 import TextareaFieldDialog from '../../views/core/dialog/components/textarea-field-dialog/textarea-field-dialog.svelte';
-import { createRawSnippet, mount, } from 'svelte';
-import { isMobileScreen } from '../screen/screen-service';
-import CropperDialog, {} from '../../views/core/dialog/components/cropper-dialog/cropper-dialog.svelte';
-import { processImageFile } from '../utils/image-service';
-import PickerDialog from '../../views/core/dialog/components/picker-dialog/picker-dialog.svelte';
-import NumberFieldDialog from '../../views/core/dialog/components/number-field-dialog/number-field-dialog.svelte';
+import { mount } from 'svelte';
+import { getDialogSize, isMobileScreen } from '../screen/screen-service';
+import { cropImageFile, FilePickerAccepts, OutputImageFormatEnum, processImageFile } from '../utils/image-service';
+export var DialogSizeEnum;
+(function (DialogSizeEnum) {
+    DialogSizeEnum["XS"] = "xs";
+    DialogSizeEnum["SM"] = "sm";
+    DialogSizeEnum["MD"] = "md";
+    DialogSizeEnum["LG"] = "lg";
+    DialogSizeEnum["XL"] = "xl";
+    DialogSizeEnum["FULL"] = "full";
+})(DialogSizeEnum || (DialogSizeEnum = {}));
 function addDialog(props) {
     const dialog = mount(Dialog, { target: document.getElementsByTagName('body')[0], props });
     return dialog;
@@ -113,7 +122,7 @@ export async function openNumberFieldDialog({ title, value, label, name, maxleng
         hasHeader: true,
         hasHeaderBack: isMobileScreen(),
         hasHeaderClose: !isMobileScreen(),
-        size: isMobileScreen() ? 'full' : 'sm',
+        size: getDialogSize(),
         hasTitle: true,
         title: title || 'Prompt',
         hasFooter: true,
@@ -131,7 +140,7 @@ export async function openTextFieldDialog({ title, value, label, name, maxlength
         hasHeader: true,
         hasHeaderBack: isMobileScreen(),
         hasHeaderClose: !isMobileScreen(),
-        size: isMobileScreen() ? 'full' : 'sm',
+        size: getDialogSize(),
         hasTitle: true,
         title: title || 'Prompt',
         hasFooter: true,
@@ -149,7 +158,7 @@ export async function openTextareaFieldDialog({ title, value, label, name, maxle
         hasHeader: true,
         hasHeaderBack: isMobileScreen(),
         hasHeaderClose: !isMobileScreen(),
-        size: isMobileScreen() ? 'full' : 'sm',
+        size: isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
         hasTitle: true,
         title: title || 'Prompt',
         hasFooter: true,
@@ -176,7 +185,7 @@ export async function openLoadingDialog({ msg = "Please wait...", loadingDialogC
  * @param props
  * @returns
  */
-export async function openCropperDialog({ outputWidth, outputFormat = 'webp', outputQuality = 0.8, outputType = 'file', inputImageFile, className, ...params }) {
+export async function openCropperDialog({ outputWidth, outputFormat = OutputImageFormatEnum.WEBP, outputQuality = 0.8, outputType = 'file', inputImageFile, className, outputAspectRatio, ...params }) {
     return await openDialog({
         bodyComponent: CropperDialog,
         props: {
@@ -186,6 +195,7 @@ export async function openCropperDialog({ outputWidth, outputFormat = 'webp', ou
             outputType,
             inputImageFile,
             className,
+            outputAspectRatio,
         },
         ...params,
         hasHeader: true,
@@ -197,7 +207,7 @@ export async function openCropperDialog({ outputWidth, outputFormat = 'webp', ou
         title: params.title || 'Crop Image',
         hasHeaderBack: isMobileScreen(),
         hasHeaderClose: !isMobileScreen(),
-        size: isMobileScreen() ? 'full' : 'lg',
+        size: getDialogSize(),
     });
 }
 /**
@@ -269,7 +279,7 @@ export async function openImagePickerDialog(accepts = 'image/*', options = {}) {
         try {
             options = options || {};
             if (!options.maxWidth) {
-                options.maxWidth = 1280;
+                options.maxWidth = 1920;
             }
             if (!options.maxHeight) {
                 options.maxHeight = options.maxWidth;
@@ -281,7 +291,7 @@ export async function openImagePickerDialog(accepts = 'image/*', options = {}) {
                 options.quality = options.quality / 100;
             }
             if (options.outputFormat) {
-                options.outputFormat = 'image/webp';
+                options.outputFormat = OutputImageFormatEnum.WEBP;
             }
             // Create an input element of type 'file'
             const inputElement = document.createElement('input');
@@ -325,3 +335,9 @@ export async function openImagePickerDialog(accepts = 'image/*', options = {}) {
         }
     });
 }
+export async function openImagePickerDialogWithCropper({ outputFormat = OutputImageFormatEnum.WEBP, outputWidth = 800, outputQuality = 0.6, outputAspectRatio = 1, dialogSize = DialogSizeEnum.MD, } = {}) {
+    const file = (await openFilePickerDialog(FilePickerAccepts.image));
+    let croppedFile = await cropImageFile({ inputImageFile: file, outputFormat, outputWidth, outputQuality, outputAspectRatio, dialogSize });
+    return croppedFile;
+}
+;

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

@@ -1,4 +1,5 @@
 import { ScreenSizeEnum } from "../../stores/screen-size/screen-size-store.svelte";
+import { DialogSizeEnum } from "../dialog/dialog-service";
 export declare const screenSize: {
     size: ScreenSizeEnum;
     readonly isXXL: boolean;
@@ -11,4 +12,5 @@ export declare const screenSize: {
 export declare const handleScreenSizeUpdate: (size: number) => void;
 export declare function isSmallScreen(): boolean;
 export declare function isMobileScreen(): boolean;
+export declare function getDialogSize(): DialogSizeEnum.SM | DialogSizeEnum.FULL;
 export declare function isTouchDevice(): boolean;

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

@@ -1,5 +1,6 @@
 import { createScreenSizeStore, ScreenSizeEnum } from "../../stores/screen-size/screen-size-store.svelte";
 import { BROWSER } from "esm-env";
+import { DialogSizeEnum } from "../dialog/dialog-service";
 export const screenSize = createScreenSizeStore();
 export const handleScreenSizeUpdate = (size) => {
     // console.log('screenSizeChanged', size)
@@ -30,6 +31,9 @@ export function isSmallScreen() {
 export function isMobileScreen() {
     return isSmallScreen();
 }
+export function getDialogSize() {
+    return isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM;
+}
 export function isTouchDevice() {
     return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches;
 }

package/dist/services/utils/file-service.d.ts

@@ -135,4 +135,6 @@ export declare function getFilenameExtension(filename: string): {
  * const sizeString = fileSizeString(1024);
  * console.log(sizeString); // Output: "1 kB"
  */
-export declare function fileSizeString(size: number): string;
+export declare function formatFileSize(bytes?: number): string;
+export declare function getExtFromFileType(type: string): string | null;
+export declare function ellipsisFileNameAtCenter(name: string, sizeLimit?: number, startLength?: number, endLength?: number): string;

package/dist/services/utils/file-service.js

@@ -248,11 +248,54 @@ export function getFilenameExtension(filename) {
  * const sizeString = fileSizeString(1024);
  * console.log(sizeString); // Output: "1 kB"
  */
-export function fileSizeString(size) {
-    if (size < 0)
-        return '0 B';
-    const units = ['B', 'kB', 'MB', 'GB', 'TB'];
-    const exponent = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
-    const value = (size / Math.pow(1024, exponent)).toFixed(2);
-    return `${value} ${units[exponent]}`;
+export function formatFileSize(bytes = 0) {
+    if (bytes < 1024) {
+        return bytes + ' Bytes';
+    }
+    else if (bytes < 1024 * 1024) {
+        return (bytes / 1024).toFixed(2) + ' KB';
+    }
+    else if (bytes < 1024 * 1024 * 1024) {
+        return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+    }
+    else {
+        return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
+    }
+}
+export function getExtFromFileType(type) {
+    const mimeTypes = {
+        "image/jpeg": "jpg",
+        "image/png": "png",
+        "image/gif": "gif",
+        "image/webp": "webp",
+        "image/svg+xml": "svg",
+        "video/mp4": "mp4",
+        "video/webm": "webm",
+        "video/ogg": "ogv",
+        "audio/mpeg": "mp3",
+        "audio/ogg": "ogg",
+        "audio/wav": "wav",
+        "application/pdf": "pdf",
+        "application/json": "json",
+        "application/javascript": "js",
+        "text/html": "html",
+        "text/css": "css",
+        "text/plain": "txt",
+        "application/zip": "zip",
+        "application/x-rar-compressed": "rar",
+        "application/xml": "xml"
+    };
+    return mimeTypes[type] || null;
+}
+export function ellipsisFileNameAtCenter(name, sizeLimit = 15, startLength = 5, endLength = 3) {
+    name = name || '';
+    if (name.length > sizeLimit) {
+        name = [
+            name.substring(0, startLength),
+            '…',
+            name.substring(name.lastIndexOf('.') - endLength, name.length)
+        ].join('');
+        return name;
+    }
+    return name;
 }

package/dist/services/utils/image-service.d.ts

@@ -1,4 +1,22 @@
-export declare const ACCEPT_IMAGE_FILES: string;
+import type { DialogSize } from "../../views";
+export type ImageCapttures = ImageCapttureEnum.USER | ImageCapttureEnum.ENVIRONMENT;
+export declare enum ImageCapttureEnum {
+    USER = "user",
+    ENVIRONMENT = "environment"
+}
+export type OutputImageFormats = OutputImageFormatEnum.JPG | OutputImageFormatEnum.WEBP | OutputImageFormatEnum.PNG;
+export declare enum OutputImageFormatEnum {
+    WEBP = "image/webp",
+    JPG = "image/jpeg",
+    PNG = "image/png"
+}
+export declare class FilePickerAccepts {
+    static image: string;
+    static document: string;
+    static video: string;
+    static audio: string;
+    static text: string;
+}
 /**
  * Processes an image file by resizing, reducing file size, and converting it to a specified format based on the provided options.
  * @param file - The original image file.
@@ -9,7 +27,7 @@ export declare function processImageFile(file: File, options?: {
     maxWidth?: number;
     maxHeight?: number;
     maxSizeInBytes?: number;
-    outputFormat?: 'image/webp' | 'image/jpeg' | 'image/png';
+    outputFormat?: OutputImageFormats;
     quality?: number;
 }): Promise<File>;
 /**
@@ -79,3 +97,11 @@ export declare function readFileAsImage(file: File): Promise<HTMLImageElement>;
  * });
  */
 export declare function dataUrlToImage(dataUrl: string): Promise<HTMLImageElement>;
+export declare function cropImageFile({ inputImageFile, outputFormat, outputWidth, outputQuality, outputAspectRatio, dialogSize, }: {
+    inputImageFile: File;
+    outputFormat?: OutputImageFormats;
+    outputWidth?: number;
+    outputQuality?: number;
+    outputAspectRatio?: number;
+    dialogSize?: DialogSize;
+}): Promise<File | null>;

package/dist/services/utils/image-service.js

@@ -1,5 +1,24 @@
-import { readFileAsDataURL } from "./file-service";
-export const ACCEPT_IMAGE_FILES = ".png,.PNG,.jpg,.jpg,.jepg,.JPEG,.webp,.WEBP";
+import { DialogSizeEnum, openCropperDialog } from "../dialog/dialog-service";
+import { getExtFromFileType, readFileAsDataURL } from "./file-service";
+import { nanoid } from 'nanoid';
+export var ImageCapttureEnum;
+(function (ImageCapttureEnum) {
+    ImageCapttureEnum["USER"] = "user";
+    ImageCapttureEnum["ENVIRONMENT"] = "environment";
+})(ImageCapttureEnum || (ImageCapttureEnum = {}));
+export var OutputImageFormatEnum;
+(function (OutputImageFormatEnum) {
+    OutputImageFormatEnum["WEBP"] = "image/webp";
+    OutputImageFormatEnum["JPG"] = "image/jpeg";
+    OutputImageFormatEnum["PNG"] = "image/png";
+})(OutputImageFormatEnum || (OutputImageFormatEnum = {}));
+export class FilePickerAccepts {
+    static image = '.png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.webp,.WEBP';
+    static document = '.pdf,.PDF,.doc,.DOC,.docx,.DOCX,.xls,.XLS,.xlsx,.XLSX,.ppt,.PPT,.pptx,.PPTX,.txt,.TXT,';
+    static video = '.mp4,.MP4,.mov,.MOV,.avi,.AVI,.wmv,.WMV,.flv,.FLV,.mkv,.MKV,.webm,.WEBM,';
+    static audio = '.mp3,.MP3,.wav,.WAV,.aac,.AAC,.flac,.FLAC,.ogg,.OGG,.wma,.WMA,';
+    static text = '.txt,.TXT,';
+}
 /**
  * Processes an image file by resizing, reducing file size, and converting it to a specified format based on the provided options.
  * @param file - The original image file.
@@ -13,7 +32,7 @@ export async function processImageFile(file, options = {}) {
     // }
     options = options || {};
     if (!options.maxWidth) {
-        options.maxWidth = 1280;
+        options.maxWidth = 1920;
     }
     if (!options.maxHeight) {
         options.maxHeight = options.maxWidth;
@@ -25,7 +44,7 @@ export async function processImageFile(file, options = {}) {
         options.quality = options.quality / 100;
     }
     if (options.outputFormat) {
-        options.outputFormat = 'image/webp';
+        options.outputFormat = OutputImageFormatEnum.WEBP;
     }
     // Read the image as a data URL
     const imageDataUrl = await readFileAsDataURL(file);
@@ -208,3 +227,34 @@ export async function dataUrlToImage(dataUrl) {
         img.src = dataUrl;
     });
 }
+export async function cropImageFile({ inputImageFile, outputFormat = OutputImageFormatEnum.WEBP, outputWidth = 600, outputQuality = 0.6, outputAspectRatio = 1, dialogSize = DialogSizeEnum.MD, }) {
+    let imageFile = null;
+    let fileName = '';
+    if (inputImageFile) {
+        imageFile = (await openCropperDialog({
+            inputImageFile,
+            outputFormat,
+            outputWidth,
+            outputQuality,
+            outputAspectRatio,
+            size: dialogSize,
+        }));
+        if (imageFile) {
+            try {
+                // console.log('imageFile', imageFile);
+                let filenameNanoid = nanoid(10);
+                fileName = (imageFile.name || '').toLocaleLowerCase().trim().replace(/ /g, '_').substring(0, 4);
+                fileName = (fileName ? fileName + '-' + filenameNanoid : filenameNanoid) + `.${getExtFromFileType(outputFormat)}`;
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }
+    let newFile = null;
+    if (imageFile && fileName) {
+        // Add the file name to the file object, so that it can be used in the form.
+        newFile = new File([imageFile], fileName, { type: imageFile.type || 'image/webp' });
+    }
+    return newFile;
+}

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

@@ -256,3 +256,5 @@ export declare function inchToPixel(inches: number): number;
  */
 export declare function pixelToInch(pixels: number): number;
 export declare function alphabetNanoid(length?: number, lowercase?: boolean): string;
+export declare function sanitizePhoneNumber(input: string): string;
+export declare function isChrome(): boolean;

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

@@ -403,3 +403,11 @@ export function alphabetNanoid(length = 10, lowercase = false) {
     const nanoid = customAlphabet(alphabet, length);
     return nanoid();
 }
+export function sanitizePhoneNumber(input) {
+    return input.replace(/\D/g, "");
+}
+export function isChrome() {
+    // Chrome's userAgent contains "Chrome", and its vendor contains "Google Inc"
+    // Note: Microsoft Edge's userAgent also contains "Chrome"
+    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+}

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

@@ -1,12 +1,14 @@
 <script module lang="ts"></script>
 
 <script lang="ts">import EasyCropperjs from "@cloudparker/easy-cropperjs-svelte";
+import { OutputImageFormatEnum } from "../../../../../services";
 let {
   outputWidth,
-  outputFormat = "webp",
+  outputFormat = OutputImageFormatEnum.WEBP,
   outputQuality = 0.8,
   outputType = "file",
   inputImageFile,
+  outputAspectRatio,
   className,
   setOnOkClick,
   setResult,
@@ -18,9 +20,10 @@ let easyCropperjsRef = $state(null);
 setOnOkClick(async () => {
   console.log("setOnOkClick", easyCropperjsRef);
   if (easyCropperjsRef) {
+    let targetOutoutImageFormat = outputFormat.split("/")[1] || "webp";
     let res = await easyCropperjsRef.crop({
       outputWidth,
-      outputFormat,
+      outputFormat: targetOutoutImageFormat,
       outputQuality,
       outputType
     });
@@ -35,5 +38,10 @@ function handleCropped(result) {
 </script>
 
 <div class="h-full w-full overflow-hidden {className}">
-	<EasyCropperjs bind:this={easyCropperjsRef} {inputImageFile} onCrop={handleCropped} />
+	<EasyCropperjs
+		bind:this={easyCropperjsRef}
+		{inputImageFile}
+		onCrop={handleCropped}
+		{outputAspectRatio}
+	/>
 </div>

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

@@ -1,13 +1,14 @@
 export type CropperDialogPropsType = {
     outputAspectRatio?: number;
     outputWidth?: number;
-    outputFormat?: 'png' | 'jpeg' | 'webp';
+    outputFormat?: OutputImageFormats;
     outputQuality?: number;
     outputType?: 'file' | 'base64';
     inputImageFile?: File | null;
     className?: string;
 };
 import type { DialogExports } from '../dialog/dialog.svelte';
+import { type OutputImageFormats } from '../../../../../services';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -6,7 +6,7 @@ import ButtonClose from "../../../button/components/button-close-icon/button-clo
 import {} from "svelte";
 import "../../../../../tailwind.css";
 import { mdiArrowLeft, mdiClose } from "../../../icon";
-import { isMobileScreen } from "../../../../../services";
+import { DialogSizeEnum, isMobileScreen } from "../../../../../services";
 let {
   backdropClassName = "",
   bodyClassName = "",
@@ -42,7 +42,7 @@ let {
   headerCloseIconPath = mdiClose,
   hasHeaderBack = isMobileScreen(),
   hasHeaderClose = !isMobileScreen(),
-  size = isMobileScreen() ? "full" : "sm",
+  size = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM,
   id = "",
   onClose,
   onCloseClick,

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

@@ -4,7 +4,7 @@
  * true -> Close dialog
  */
 type DialogCloseButtonClickFunction = (ev: MouseEvent | TouchEvent) => Promise<boolean>;
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type DialogSize = DialogSizeEnum.XS | DialogSizeEnum.SM | DialogSizeEnum.MD | DialogSizeEnum.LG | DialogSizeEnum.XL | DialogSizeEnum.FULL;
 export type DialogProps = {
     backdropClassName?: string;
     bodyClassName?: string;
@@ -68,6 +68,7 @@ export type DialogExports = {
 };
 import { type Snippet } from 'svelte';
 import '../../../../../tailwind.css';
+import { DialogSizeEnum } from '../../../../../services';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.84",
+    "version": "0.0.85",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [