@cloudparker/moldex.js 0.0.50 → 0.0.52

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

@@ -59,3 +59,30 @@ export declare function openLoadingDialog({ msg, loadingDialogContainerClassName
  * @returns
  */
 export declare function openCropperDialog<T, R>({ outputWidth, outputFormat, outputQuality, outputType, inputImageFile, className, ...params }: DialogPropsType & 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.
+ * @param accepts - A string or array of accepted file types (e.g., 'image/*', '.pdf').
+ * @param multiple - A boolean indicating if multiple files can be selected.
+ * @returns A promise that resolves to a File or an array of File objects, or null if no files were selected.
+ */
+export declare function openFilePickerDialog<T extends File | File[]>({ accepts, multiple }: {
+    accepts: string | string[];
+    multiple: boolean;
+}): Promise<T | null>;
+/**
+ * Opens an image picker dialog that supports mobile devices, camera capture, gallery selection, and file explorer.
+ * Allows the user to specify output format and quality for the selected images.
+ * @param accepts - A string or array of accepted file types (e.g., 'image/*').
+ * @param options - Additional options for capturing images (e.g., required resolution, file size, output format).
+ * @returns A promise that resolves to a processed File object or an array of File objects, or null if no file was selected.
+ */
+export declare function openImagePickerDialog(accepts?: string | string[], options?: {
+    multiple?: boolean;
+    capture?: 'user' | 'environment';
+    maxWidth?: number;
+    maxHeight?: number;
+    maxSizeInBytes?: number;
+    outputFormat?: 'image/webp' | 'image/jpeg' | 'image/png';
+    quality?: number;
+}): Promise<File | File[] | null>;

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

@@ -7,6 +7,7 @@ import TextareaFieldDialog from '../../views/core/dialog/components/textarea-fie
 import { 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';
 function addDialog(props) {
     const dialog = mount(Dialog, { target: document.getElementsByTagName('body')[0], props });
     return dialog;
@@ -168,3 +169,112 @@ export async function openCropperDialog({ outputWidth, outputFormat = 'webp', ou
         size: isMobileScreen() ? 'full' : 'lg',
     });
 }
+/**
+ * Opens a file picker dialog and returns the selected file or files.
+ * This function uses native browser APIs to ensure compatibility across different browsers.
+ * @param accepts - A string or array of accepted file types (e.g., 'image/*', '.pdf').
+ * @param multiple - A boolean indicating if multiple files can be selected.
+ * @returns A promise that resolves to a File or an array of File objects, or null if no files were selected.
+ */
+export async function openFilePickerDialog({ accepts = '*/*', multiple = false }) {
+    // Check if the browser supports the required File API and input element
+    if (typeof window === 'undefined' || typeof document === 'undefined' || !window.File || !window.FileList || !window.FileReader) {
+        console.error('File APIs are not fully supported in this browser.');
+        return null;
+    }
+    return new Promise((resolve, reject) => {
+        try {
+            // Create an input element of type 'file'
+            const inputElement = document.createElement('input');
+            inputElement.type = 'file';
+            inputElement.style.display = 'none'; // Hide the input element
+            // Set accepted file types if provided
+            if (Array.isArray(accepts)) {
+                inputElement.accept = accepts.join(',');
+            }
+            else {
+                inputElement.accept = accepts;
+            }
+            // Set multiple attribute based on the parameter
+            inputElement.multiple = multiple;
+            // Listen for changes (i.e., when files are selected)
+            inputElement.addEventListener('change', () => {
+                // Check if files were selected
+                if (inputElement.files) {
+                    // If multiple is true, return an array of File objects
+                    if (multiple) {
+                        resolve(Array.from(inputElement.files));
+                    }
+                    else {
+                        // Otherwise, return the first selected File
+                        resolve(inputElement.files[0]);
+                    }
+                }
+                else {
+                    resolve(null); // No files selected
+                }
+            });
+            // Append the input element to the body and simulate a click to open the dialog
+            document.body.appendChild(inputElement);
+            inputElement.click();
+            // Remove the input element from the DOM after use to prevent memory leaks
+            document.body.removeChild(inputElement);
+        }
+        catch (error) {
+            console.error('An error occurred while opening the file picker dialog:', error);
+            reject(error); // Handle any unexpected errors
+        }
+    });
+}
+/**
+ * Opens an image picker dialog that supports mobile devices, camera capture, gallery selection, and file explorer.
+ * Allows the user to specify output format and quality for the selected images.
+ * @param accepts - A string or array of accepted file types (e.g., 'image/*').
+ * @param options - Additional options for capturing images (e.g., required resolution, file size, output format).
+ * @returns A promise that resolves to a processed File object or an array of File objects, or null if no file was selected.
+ */
+export async function openImagePickerDialog(accepts = 'image/*', options) {
+    return new Promise((resolve, reject) => {
+        try {
+            // Create an input element of type 'file'
+            const inputElement = document.createElement('input');
+            inputElement.type = 'file';
+            inputElement.accept = Array.isArray(accepts) ? accepts.join(',') : accepts;
+            inputElement.multiple = options?.multiple || false;
+            inputElement.style.display = 'none';
+            // Set capture attribute if specified
+            if (options?.capture) {
+                inputElement.setAttribute('capture', options.capture);
+            }
+            // Listen for file selection
+            inputElement.addEventListener('change', async () => {
+                if (!inputElement.files) {
+                    resolve(null); // No files selected
+                    return;
+                }
+                const files = Array.from(inputElement.files);
+                try {
+                    // Process each selected file and resize/compress/convert if required
+                    const processedFiles = await Promise.all(files.map((file) => processImageFile(file, options)));
+                    // Return a single file or an array of files based on the multiple option
+                    if (options?.multiple) {
+                        resolve(processedFiles);
+                    }
+                    else {
+                        resolve(processedFiles[0] || null);
+                    }
+                }
+                catch (error) {
+                    reject(error);
+                }
+            });
+            // Append and trigger the file picker
+            document.body.appendChild(inputElement);
+            inputElement.click();
+            document.body.removeChild(inputElement);
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+}

package/dist/services/index.d.ts

@@ -1,5 +1,11 @@
 export * from './date/date-service.js';
 export * from './dialog/dialog-service.js';
+export * from './navigation/navigation-service.js';
 export * from './screen/screen-service.js';
 export * from './toast/toast-service.js';
 export * from './utils/utils-service.js';
+export * from './utils/color-service.js';
+export * from './utils/download-service.js';
+export * from './utils/file-service.js';
+export * from './utils/http-service.js';
+export * from './utils/image-service.js';

package/dist/services/index.js

@@ -1,6 +1,11 @@
 export * from './date/date-service.js';
 export * from './dialog/dialog-service.js';
-// export * from './navigation/navigation-service.js';
+export * from './navigation/navigation-service.js';
 export * from './screen/screen-service.js';
 export * from './toast/toast-service.js';
 export * from './utils/utils-service.js';
+export * from './utils/color-service.js';
+export * from './utils/download-service.js';
+export * from './utils/file-service.js';
+export * from './utils/http-service.js';
+export * from './utils/image-service.js';

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

@@ -1,4 +1,4 @@
-import { goto, pushState } from '$app/navigation';
+// import { goto, pushState } from '$app/navigation';
 import { createRefererStore } from '../../stores/referrer-store/referrer-store.svelte';
 import { BROWSER } from 'esm-env';
 export const referrer = createRefererStore();
@@ -12,7 +12,7 @@ export const popBackState = () => {
 export const registerBackPress = (state) => {
     if (BROWSER) {
         pushBackState(state);
-        pushState('', {});
+        window.history.pushState({}, '');
     }
 };
 export const addBackKeyListener = (callback) => {
@@ -21,11 +21,11 @@ export const addBackKeyListener = (callback) => {
             if (callback) {
                 let result = callback(event);
                 if (result) {
-                    pushState('', {});
+                    window.history.pushState({}, '');
                 }
             }
         };
-        pushState('', {});
+        window.history.pushState({}, '');
         window.addEventListener('popstate', listener);
         return listener;
     }
@@ -39,7 +39,7 @@ export function goBack() {
     history.back();
 }
 export function goHome() {
-    goto('/', { replaceState: true });
+    history.back();
 }
 ;
 export function createRedirectUrl() {

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

@@ -0,0 +1,46 @@
+/**
+ * Validates whether a given string is a valid hexadecimal color code.
+ *
+ * This function checks if a given string matches the pattern for a valid hex color code,
+ * which can be either 3 or 6 characters long, prefixed with '#'.
+ *
+ * @param hex - The string to validate as a hex color code.
+ * @returns A boolean indicating whether the string is a valid hex color code.
+ *
+ * @example
+ * console.log(isValidHexColor('#FFF'));   // Output: true
+ * console.log(isValidHexColor('#123ABC')); // Output: true
+ * console.log(isValidHexColor('#1234'));   // Output: false
+ */
+export declare function isValidHexColor(hex: string): boolean;
+/**
+ * Converts a named or RGB color string to its hexadecimal representation.
+ *
+ * This function creates a temporary DOM element, sets its color property to the provided color string,
+ * and retrieves the computed color value. It then converts the RGB color to a hexadecimal format.
+ *
+ * @param color - A color string, such as a named color ('red'), RGB color ('rgb(255, 0, 0)'), or hex color ('#FF0000').
+ * @returns The hexadecimal representation of the color.
+ *
+ * @throws An error if the color cannot be parsed.
+ *
+ * @example
+ * console.log(colorToHex('red'));        // Output: #FF0000
+ * console.log(colorToHex('rgb(0, 255, 0)')); // Output: #00FF00
+ */
+export declare function colorToHex(color: string): string;
+/**
+ * Converts RGB values to a hexadecimal color code.
+ *
+ * This function takes the red, green, and blue components and converts them to a hexadecimal string.
+ * The resulting hex code is formatted as '#RRGGBB'.
+ *
+ * @param r - The red component (0-255).
+ * @param g - The green component (0-255).
+ * @param b - The blue component (0-255).
+ * @returns The hexadecimal color code in the format '#RRGGBB'.
+ *
+ * @example
+ * console.log(rgbToHex(255, 0, 0)); // Output: #FF0000
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;

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

@@ -0,0 +1,73 @@
+/**
+ * Validates whether a given string is a valid hexadecimal color code.
+ *
+ * This function checks if a given string matches the pattern for a valid hex color code,
+ * which can be either 3 or 6 characters long, prefixed with '#'.
+ *
+ * @param hex - The string to validate as a hex color code.
+ * @returns A boolean indicating whether the string is a valid hex color code.
+ *
+ * @example
+ * console.log(isValidHexColor('#FFF'));   // Output: true
+ * console.log(isValidHexColor('#123ABC')); // Output: true
+ * console.log(isValidHexColor('#1234'));   // Output: false
+ */
+export function isValidHexColor(hex) {
+    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return hexRegex.test(hex);
+}
+/**
+ * Converts a named or RGB color string to its hexadecimal representation.
+ *
+ * This function creates a temporary DOM element, sets its color property to the provided color string,
+ * and retrieves the computed color value. It then converts the RGB color to a hexadecimal format.
+ *
+ * @param color - A color string, such as a named color ('red'), RGB color ('rgb(255, 0, 0)'), or hex color ('#FF0000').
+ * @returns The hexadecimal representation of the color.
+ *
+ * @throws An error if the color cannot be parsed.
+ *
+ * @example
+ * console.log(colorToHex('red'));        // Output: #FF0000
+ * console.log(colorToHex('rgb(0, 255, 0)')); // Output: #00FF00
+ */
+export function colorToHex(color) {
+    // Create a temporary div element to use its computed style
+    const tempDiv = document.createElement("div");
+    tempDiv.style.color = color;
+    document.body.appendChild(tempDiv);
+    // Get the computed color from the div element
+    const computedColor = window.getComputedStyle(tempDiv).color;
+    document.body.removeChild(tempDiv);
+    // Extract the RGB values from the computed color
+    const rgb = computedColor.match(/\d+/g)?.map(Number);
+    if (!rgb || rgb.length !== 3) {
+        throw new Error(`Unable to parse color: ${color}`);
+    }
+    // Convert RGB values to a hex color and return
+    return rgbToHex(rgb[0], rgb[1], rgb[2]);
+}
+/**
+ * Converts RGB values to a hexadecimal color code.
+ *
+ * This function takes the red, green, and blue components and converts them to a hexadecimal string.
+ * The resulting hex code is formatted as '#RRGGBB'.
+ *
+ * @param r - The red component (0-255).
+ * @param g - The green component (0-255).
+ * @param b - The blue component (0-255).
+ * @returns The hexadecimal color code in the format '#RRGGBB'.
+ *
+ * @example
+ * console.log(rgbToHex(255, 0, 0)); // Output: #FF0000
+ */
+export function rgbToHex(r, g, b) {
+    if (![r, g, b].every((value) => typeof value === 'number' && value >= 0 && value <= 255)) {
+        throw new Error('RGB values must be numbers between 0 and 255.');
+    }
+    return ("#" +
+        [r, g, b]
+            .map((x) => x.toString(16).padStart(2, "0")) // Convert to hex and ensure two characters
+            .join("")
+            .toUpperCase());
+}

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

@@ -0,0 +1,91 @@
+/**
+ * Downloads a file from various data sources (string, URL, Data URL, or File object).
+ *
+ * This function handles downloading files from a variety of sources, including:
+ * - String data (text, JSON, etc.)
+ * - URLs (file URLs or remote URLs)
+ * - Data URLs (Base64 encoded strings)
+ * - File or Blob objects
+ *
+ * @param data - The data to download. It can be a string, URL, Data URL, or a File/Blob object.
+ * @param filename - The name for the downloaded file.
+ * @param mimeType - Optional. The MIME type of the file. Default is 'application/octet-stream'.
+ *
+ * @example
+ * // Download a string as a text file
+ * downloadFile('Hello, world!', 'example.txt', 'text/plain');
+ *
+ * @example
+ * // Download a file from a URL
+ * downloadFile('https://example.com/file.pdf', 'downloaded-file.pdf');
+ *
+ * @example
+ * // Download a file from a Data URL
+ * const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
+ * downloadFile(dataUrl, 'image.png');
+ *
+ * @example
+ * // Download a File object
+ * const myFile = new File(['Hello, world!'], 'example.txt', { type: 'text/plain' });
+ * downloadFile(myFile);
+ */
+export declare function downloadFile(data: string | URL | File | Blob, filename?: string, mimeType?: string): void;
+/**
+ * Downloads plain string data as a file.
+ *
+ * @param data - The string data to download.
+ * @param filename - The name for the downloaded file.
+ * @param mimeType - The MIME type of the file.
+ */
+export declare function downloadStringData(data: string, filename: string, mimeType: string): void;
+/**
+ * Downloads a file from a given URL.
+ *
+ * @param url - The URL to download the file from.
+ * @param filename - The name for the downloaded file.
+ */
+export declare function downloadFromUrl(url: string, filename: string): void;
+/**
+ * Downloads a file from a Data URL (Base64 encoded string).
+ *
+ * @param dataUrl - The Data URL to download.
+ * @param filename - The name for the downloaded file.
+ * @param mimeType - Optional. The MIME type of the file.
+ */
+export declare function downloadDataUrl(dataUrl: string, filename: string, mimeType?: string): void;
+/**
+ * Downloads a File or Blob object.
+ *
+ * @param file - The File or Blob object to download.
+ * @param filename - The name for the downloaded file.
+ */
+export declare function downloadBlob(file: Blob, filename: string): void;
+/**
+ * Converts a Data URL to a Blob object.
+ *
+ * @param dataUrl - The Data URL to convert.
+ * @param mimeType - Optional. The MIME type of the resulting Blob.
+ * @returns A Blob object representing the data.
+ */
+export declare function dataUrlToBlob(dataUrl: string, mimeType?: string): Blob;
+/**
+ * Determines if a given string is a valid Data URL.
+ *
+ * @param str - The string to validate.
+ * @returns A boolean indicating whether the string is a valid Data URL.
+ */
+export declare function isDataUrl(str: string): boolean;
+/**
+ * Determines if a given string is a valid URL.
+ *
+ * @param str - The string to validate.
+ * @returns A boolean indicating whether the string is a valid URL.
+ */
+export declare function isUrl(str: string): boolean;
+/**
+ * Extracts the filename from a URL.
+ *
+ * @param url - The URL string.
+ * @returns The extracted filename, or 'download' if the URL does not contain a filename.
+ */
+export declare function getFilenameFromUrl(url: string): string;

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

@@ -0,0 +1,159 @@
+/**
+ * Downloads a file from various data sources (string, URL, Data URL, or File object).
+ *
+ * This function handles downloading files from a variety of sources, including:
+ * - String data (text, JSON, etc.)
+ * - URLs (file URLs or remote URLs)
+ * - Data URLs (Base64 encoded strings)
+ * - File or Blob objects
+ *
+ * @param data - The data to download. It can be a string, URL, Data URL, or a File/Blob object.
+ * @param filename - The name for the downloaded file.
+ * @param mimeType - Optional. The MIME type of the file. Default is 'application/octet-stream'.
+ *
+ * @example
+ * // Download a string as a text file
+ * downloadFile('Hello, world!', 'example.txt', 'text/plain');
+ *
+ * @example
+ * // Download a file from a URL
+ * downloadFile('https://example.com/file.pdf', 'downloaded-file.pdf');
+ *
+ * @example
+ * // Download a file from a Data URL
+ * const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
+ * downloadFile(dataUrl, 'image.png');
+ *
+ * @example
+ * // Download a File object
+ * const myFile = new File(['Hello, world!'], 'example.txt', { type: 'text/plain' });
+ * downloadFile(myFile);
+ */
+export function downloadFile(data, filename, mimeType) {
+    // Determine the type of the data and handle accordingly
+    if (typeof data === 'string') {
+        if (isDataUrl(data)) {
+            // Handle Data URL
+            downloadDataUrl(data, filename || 'download', mimeType);
+        }
+        else if (isUrl(data)) {
+            // Handle URL download
+            downloadFromUrl(data, filename || getFilenameFromUrl(data));
+        }
+        else {
+            // Handle plain string data
+            downloadStringData(data, filename || 'download.txt', mimeType || 'application/octet-stream');
+        }
+    }
+    else if (data instanceof File || data instanceof Blob) {
+        // Handle File or Blob object
+        downloadBlob(data, filename || data.name || 'download');
+    }
+    else {
+        console.error('Unsupported data type for download.');
+    }
+}
+/**
+ * Downloads plain string data as a file.
+ *
+ * @param data - The string data to download.
+ * @param filename - The name for the downloaded file.
+ * @param mimeType - The MIME type of the file.
+ */
+export function downloadStringData(data, filename, mimeType) {
+    const blob = new Blob([data], { type: mimeType });
+    downloadBlob(blob, filename);
+}
+/**
+ * Downloads a file from a given URL.
+ *
+ * @param url - The URL to download the file from.
+ * @param filename - The name for the downloaded file.
+ */
+export function downloadFromUrl(url, filename) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+/**
+ * Downloads a file from a Data URL (Base64 encoded string).
+ *
+ * @param dataUrl - The Data URL to download.
+ * @param filename - The name for the downloaded file.
+ * @param mimeType - Optional. The MIME type of the file.
+ */
+export function downloadDataUrl(dataUrl, filename, mimeType) {
+    const blob = dataUrlToBlob(dataUrl, mimeType);
+    downloadBlob(blob, filename);
+}
+/**
+ * Downloads a File or Blob object.
+ *
+ * @param file - The File or Blob object to download.
+ * @param filename - The name for the downloaded file.
+ */
+export function downloadBlob(file, filename) {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(file);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    // Clean up the URL object to free up memory
+    URL.revokeObjectURL(link.href);
+    document.body.removeChild(link);
+}
+/**
+ * Converts a Data URL to a Blob object.
+ *
+ * @param dataUrl - The Data URL to convert.
+ * @param mimeType - Optional. The MIME type of the resulting Blob.
+ * @returns A Blob object representing the data.
+ */
+export function dataUrlToBlob(dataUrl, mimeType) {
+    const byteString = atob(dataUrl.split(',')[1]);
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], { type: mimeType || 'application/octet-stream' });
+}
+/**
+ * Determines if a given string is a valid Data URL.
+ *
+ * @param str - The string to validate.
+ * @returns A boolean indicating whether the string is a valid Data URL.
+ */
+export function isDataUrl(str) {
+    const pattern = /^data:([a-zA-Z0-9/+.-]+);base64,/;
+    return pattern.test(str);
+}
+/**
+ * Determines if a given string is a valid URL.
+ *
+ * @param str - The string to validate.
+ * @returns A boolean indicating whether the string is a valid URL.
+ */
+export function isUrl(str) {
+    try {
+        new URL(str);
+        return true;
+    }
+    catch (_) {
+        return false;
+    }
+}
+/**
+ * Extracts the filename from a URL.
+ *
+ * @param url - The URL string.
+ * @returns The extracted filename, or 'download' if the URL does not contain a filename.
+ */
+export function getFilenameFromUrl(url) {
+    const segments = url.split('/');
+    const filename = segments.pop();
+    return filename && filename.includes('.') ? filename : 'download';
+}