@cloudparker/moldex.js 4.1.7 → 4.1.9

package/dist/actions/badge.d.ts

@@ -0,0 +1,12 @@
+export type BadgeProsType = {
+    containerClassName?: string;
+    badgePositionClassName?: string;
+    badgeContainerClassName?: string;
+    badgeClassName?: string;
+    badgeBackgroundClassName?: string;
+    badgeText?: string;
+    hasBadgeBackground?: boolean;
+};
+export declare function badge(node: HTMLElement, { containerClassName, badgePositionClassName, badgeContainerClassName, badgeClassName, badgeBackgroundClassName, badgeText, hasBadgeBackground }?: BadgeProsType): {
+    destroy(): void;
+};

package/dist/actions/badge.js

@@ -0,0 +1,22 @@
+export function badge(node, { containerClassName = '', badgePositionClassName = 'top-0 right-0', badgeContainerClassName = '', badgeClassName = '', badgeBackgroundClassName = '', badgeText = '', hasBadgeBackground = true } = {}) {
+    let badgeBackElement = hasBadgeBackground ? `<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75 ${badgeBackgroundClassName}"></span>` : '';
+    const badge = document.createElement('span');
+    badge.className = 'absolute transform translate-x-1/2 -translate-y-1/2 ' + badgePositionClassName;
+    badge.innerHTML = `
+      <span class="relative flex h-3 w-3 ${badgeContainerClassName}">
+        ${badgeBackElement}
+        <span class="relative inline-grid place-items-center rounded-full h-3 w-3 text-3xs text-white bg-sky-500 ${badgeClassName}">${badgeText || ''}</span>
+      </span>
+    `;
+    let list = ['relative'];
+    list.push(...containerClassName.split(' ').map(o => o.trim()).filter(o => o));
+    const nodeClassList = [...list];
+    node.classList.add(...nodeClassList);
+    node.appendChild(badge);
+    return {
+        destroy() {
+            node.removeChild(badge);
+            node.classList.remove(...nodeClassList);
+        }
+    };
+}

package/dist/actions/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ripple.js";
+export * from "./badge.js";
+export * from "./no-context-menu.js";

package/dist/actions/index.js

@@ -0,0 +1,3 @@
+export * from "./ripple.js";
+export * from "./badge.js";
+export * from "./no-context-menu.js";

package/dist/actions/no-context-menu.d.ts

@@ -0,0 +1,3 @@
+export declare function noContextMenu(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/actions/no-context-menu.js

@@ -0,0 +1,11 @@
+export function noContextMenu(node) {
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+    };
+    node.addEventListener('contextmenu', handleContextMenu);
+    return {
+        destroy() {
+            node.removeEventListener('contextmenu', handleContextMenu);
+        },
+    };
+}

package/dist/actions/ripple.css

@@ -0,0 +1,29 @@
+@keyframes ripple-effect {
+	0% {
+		transform: scale(0);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(4);
+		opacity: 0;
+	}
+}
+
+.ripple-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	border-radius: inherit;
+	pointer-events: none;
+}
+
+.ripple {
+	position: absolute;
+	border-radius: 50%;
+	background-color: var(--ripple-color, rgba(0, 0, 0, 0.12));
+	transform: scale(0);
+	animation: ripple-effect 0.5s linear;
+}

package/dist/actions/ripple.d.ts

@@ -0,0 +1,7 @@
+import './ripple.css';
+export type RipplePropsType = {
+    color?: string | 'light' | 'dark';
+};
+export declare function ripple(node: HTMLElement, { color }?: RipplePropsType): {
+    destroy(): void;
+};

package/dist/actions/ripple.js

@@ -0,0 +1,74 @@
+import { isTouchDevice } from '../services/index.js';
+import './ripple.css';
+const DARK_RIPPLE_COLOR = 'rgba(0, 0, 0, 0.12)';
+const LIGHT_RIPPLE_COLOR = 'rgba(255, 255, 255, 0.12)';
+export function ripple(node, { color } = {}) {
+    const isTouchEnabled = isTouchDevice();
+    let timeoutInstance;
+    // Create ripple container
+    const rippleContainer = document.createElement('span');
+    rippleContainer.classList.add('ripple-container');
+    node.appendChild(rippleContainer);
+    function scheduleStartRipple(event) {
+        // Don't ripple if clicking on backdrop
+        if (event.target.closest('[aria-label="backdrop"]')) {
+            return;
+        }
+        if (node.disabled)
+            return;
+        if (timeoutInstance)
+            clearTimeout(timeoutInstance);
+        timeoutInstance = setTimeout(() => startRipple(event), 100);
+        event.stopPropagation();
+    }
+    function mouseMove(event) {
+        if (timeoutInstance)
+            clearTimeout(timeoutInstance);
+        event.stopPropagation();
+    }
+    function startRipple(event) {
+        event.stopPropagation();
+        const isDarkMode = document.documentElement.classList.contains('dark') ||
+            document.body.classList.contains('dark');
+        let rippleColor = color || (isDarkMode ? LIGHT_RIPPLE_COLOR : DARK_RIPPLE_COLOR);
+        if (color === 'light')
+            rippleColor = LIGHT_RIPPLE_COLOR;
+        if (color === 'dark')
+            rippleColor = DARK_RIPPLE_COLOR;
+        const circle = document.createElement('span');
+        circle.classList.add('ripple');
+        const diameter = Math.max(node.clientWidth, node.clientHeight);
+        const radius = diameter / 2;
+        const rect = node.getBoundingClientRect();
+        const touch = event.touches?.[0] || {};
+        const circleX = (event instanceof MouseEvent ? event.clientX : touch.clientX) - rect.left - radius;
+        const circleY = (event instanceof MouseEvent ? event.clientY : touch.clientY) - rect.top - radius;
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${circleX}px`;
+        circle.style.top = `${circleY}px`;
+        circle.style.setProperty('--ripple-color', rippleColor);
+        rippleContainer.appendChild(circle);
+        setTimeout(() => circle.remove(), 500);
+    }
+    if (!isTouchEnabled) {
+        node.addEventListener('mousedown', scheduleStartRipple);
+        node.addEventListener('mousemove', mouseMove);
+    }
+    else {
+        node.addEventListener('touchstart', scheduleStartRipple);
+        node.addEventListener('touchmove', mouseMove);
+    }
+    return {
+        destroy() {
+            if (!isTouchEnabled) {
+                node.removeEventListener('mousedown', scheduleStartRipple);
+                node.removeEventListener('mousemove', mouseMove);
+            }
+            else {
+                node.removeEventListener('touchstart', scheduleStartRipple);
+                node.removeEventListener('touchmove', mouseMove);
+            }
+            rippleContainer.remove();
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './actions/index.js';
+export * from './services/index.js';
+export * from './views/index.js';
+export * from './types.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './actions/index.js';
+export * from './services/index.js';
+export * from './views/index.js';
+export * from './types.js';

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

@@ -0,0 +1,52 @@
+import { type unitOfTime } from "moment";
+export declare class PeriodEnum {
+    static TODAY: number;
+    static TOMORROW: number;
+    static YESTERDAY: number;
+    static THIS_WEEK: number;
+    static LAST_WEEK: number;
+    static NEXT_WEEK: number;
+    static THIS_MONTH: number;
+    static LAST_MONTH: number;
+    static NEXT_MONTH: number;
+    static THIS_YEAR: number;
+    static LAST_YEAR: number;
+    static NEXT_YEAR: number;
+    static DATE: number;
+}
+export type FirestoreTimestamp = {
+    seconds: number;
+    nanoseconds: number;
+};
+export declare function getDateWith(yearChange: number): Date;
+export declare function getDateTime(date: string | Date | any): number;
+export declare function momentDiff({ startDate, endDate, unit }: {
+    startDate: Date;
+    endDate?: Date;
+    unit: unitOfTime.Diff;
+}): number;
+export declare function yearsDiff(startDate: Date, endDate?: Date): number;
+export declare function monthsDiff(startDate: Date, endDate?: Date): number;
+export declare function daysDiff(startDate: Date, endDate?: Date): number;
+export declare function hoursDiff(startDate: Date, endDate?: Date): number;
+export declare function minutesDiff(startDate: Date, endDate?: Date): number;
+export declare function getPeriodDates(period: PeriodEnum, currentDate?: Date): {
+    startDate: any;
+    endDate: any;
+};
+export declare function padTo2Digits(num: number): string;
+export declare function millisToTimeString(milliseconds: number): string;
+export declare function timestampToMillis(timestamp: any): number;
+export declare function timestampToDate(timestamp: FirestoreTimestamp): Date;
+export declare function timestampToDateString(timestamp: FirestoreTimestamp): string;
+export declare function timestampToAgo(timestamp: FirestoreTimestamp): string;
+export declare function dateToTimestamp(date: Date): {
+    seconds: number;
+    nanoseconds: number;
+};
+export declare function dateToAgo(date: Date): string;
+export declare function millisToDateString(millis: number): string;
+export declare function millisToDate(millis: number): Date;
+export declare function dateFormat(date: Date, format?: 'MM-DD-YYYY hh:mm a' | 'MM-DD-YYYY' | 'YYYY-MM-DD' | 'YYYY-MM-DDTHH:MM' | string): string;
+export declare function isDateBetween(date: Date, startDate: Date, endDate: Date): boolean;
+export declare function toDate(value: any): Date;

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

@@ -0,0 +1,206 @@
+import moment, {} from "moment";
+export class PeriodEnum {
+    static TODAY = 1;
+    static TOMORROW = 2;
+    static YESTERDAY = 3;
+    static THIS_WEEK = 4;
+    static LAST_WEEK = 5;
+    static NEXT_WEEK = 6;
+    static THIS_MONTH = 7;
+    static LAST_MONTH = 8;
+    static NEXT_MONTH = 9;
+    static THIS_YEAR = 10;
+    static LAST_YEAR = 11;
+    static NEXT_YEAR = 12;
+    static DATE = 13;
+}
+export function getDateWith(yearChange) {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() + yearChange);
+    return date;
+}
+export function getDateTime(date) {
+    if (date) {
+        if (typeof date == 'string') {
+            return new Date(date).getTime();
+        }
+        else if (date instanceof Date) {
+            return date.getTime();
+        }
+        else if (date.seconds) {
+            return timestampToMillis(date) || 0;
+        }
+    }
+    return 0;
+}
+export function momentDiff({ startDate, endDate, unit }) {
+    if (endDate) {
+        return moment(startDate).diff(moment(endDate), unit);
+    }
+    else {
+        return moment().diff(moment(startDate), unit);
+    }
+}
+export function yearsDiff(startDate, endDate) {
+    return momentDiff({ startDate, endDate, unit: 'y' });
+}
+export function monthsDiff(startDate, endDate) {
+    return momentDiff({ startDate, endDate, unit: 'M' });
+}
+export function daysDiff(startDate, endDate) {
+    return momentDiff({ startDate, endDate, unit: 'd' });
+}
+export function hoursDiff(startDate, endDate) {
+    return momentDiff({ startDate, endDate, unit: 'h' });
+}
+export function minutesDiff(startDate, endDate) {
+    return momentDiff({ startDate, endDate, unit: 'm' });
+}
+export function getPeriodDates(period, currentDate = new Date()) {
+    const currentDate1 = moment(currentDate);
+    const currentDate2 = moment(currentDate);
+    let startDate, endDate;
+    switch (period) {
+        case PeriodEnum.DATE:
+        case PeriodEnum.TODAY:
+            startDate = currentDate1.startOf('day');
+            endDate = currentDate2.endOf('day');
+            break;
+        case PeriodEnum.TOMORROW:
+            startDate = currentDate1.add(1, 'day').startOf('day');
+            endDate = currentDate2.add(1, 'day').endOf('day');
+            break;
+        case PeriodEnum.YESTERDAY:
+            startDate = currentDate1.subtract(1, 'day').startOf('day');
+            endDate = currentDate2.subtract(1, 'day').endOf('day');
+            break;
+        case PeriodEnum.THIS_WEEK:
+            startDate = currentDate1.startOf('week');
+            endDate = currentDate2.endOf('week');
+            break;
+        case PeriodEnum.LAST_WEEK:
+            startDate = currentDate1.subtract(1, 'week').startOf('week');
+            endDate = currentDate2.subtract(1, 'week').endOf('week');
+            break;
+        case PeriodEnum.NEXT_WEEK:
+            startDate = currentDate1.add(1, 'week').startOf('week');
+            endDate = currentDate2.add(1, 'week').endOf('week');
+            break;
+        case PeriodEnum.THIS_MONTH:
+            startDate = currentDate1.startOf('month');
+            endDate = currentDate2.endOf('month');
+            break;
+        case PeriodEnum.NEXT_MONTH:
+            startDate = currentDate1.add(1, 'month').startOf('month');
+            endDate = currentDate2.add(1, 'month').endOf('month');
+            break;
+        case PeriodEnum.LAST_MONTH:
+            startDate = currentDate1.subtract(1, 'month').startOf('month');
+            endDate = currentDate2.subtract(1, 'month').endOf('month');
+            break;
+        case PeriodEnum.THIS_YEAR:
+            startDate = currentDate1.startOf('year');
+            endDate = currentDate2.endOf('year');
+            break;
+        case PeriodEnum.LAST_YEAR:
+            startDate = currentDate1.subtract(1, 'year').startOf('year');
+            endDate = currentDate2.subtract(1, 'year').endOf('year');
+            break;
+        case PeriodEnum.NEXT_YEAR:
+            startDate = currentDate1.add(1, 'year').startOf('year');
+            endDate = currentDate2.add(1, 'year').endOf('year');
+            break;
+        default:
+            startDate = null;
+            endDate = null;
+            break;
+    }
+    return {
+        startDate: startDate ? startDate.toDate() : null,
+        endDate: endDate ? endDate.toDate() : null,
+    };
+}
+export function padTo2Digits(num) {
+    return num.toString().padStart(2, '0');
+}
+export function millisToTimeString(milliseconds) {
+    let seconds = Math.floor(milliseconds / 1000);
+    let minutes = Math.floor(seconds / 60);
+    let hours = Math.floor(minutes / 60);
+    seconds = seconds % 60;
+    minutes = minutes % 60;
+    // 👇️ If you don't want to roll hours over, e.g. 24 to 00
+    // 👇️ comment (or remove) the line below
+    // commenting next line gets you `24:00:00` instead of `00:00:00`
+    // or `36:15:31` instead of `12:15:31`, etc.
+    hours = hours % 24;
+    return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(seconds)}`;
+}
+export function timestampToMillis(timestamp) {
+    if (timestamp && timestamp.seconds) {
+        return (timestamp.seconds * 1000) + (timestamp.nanoseconds / 1000000);
+    }
+}
+export function timestampToDate(timestamp) {
+    if (timestamp && timestamp.seconds) {
+        return new Date((timestamp.seconds * 1000) + (timestamp.nanoseconds / 1000000));
+    }
+}
+export function timestampToDateString(timestamp) {
+    if (timestamp && timestamp.seconds) {
+        return moment(new Date(timestamp.seconds * 1000)).format('MM-DD-YYYY hh:mm a');
+    }
+}
+export function timestampToAgo(timestamp) {
+    if (timestamp && timestamp.seconds) {
+        return moment(new Date(timestamp.seconds * 1000)).fromNow();
+    }
+}
+export function dateToTimestamp(date) {
+    return { seconds: date.getTime() / 1000, nanoseconds: 0 };
+}
+export function dateToAgo(date) {
+    if (date) {
+        return moment(date).fromNow();
+    }
+}
+export function millisToDateString(millis) {
+    if (millis) {
+        return moment(new Date(millis)).format('MM-DD-YYYY hh:mm a');
+    }
+}
+export function millisToDate(millis) {
+    if (millis) {
+        return new Date(millis);
+    }
+}
+export function dateFormat(date, format = 'MM-DD-YYYY hh:mm a') {
+    if (date) {
+        return moment(date).format(format);
+    }
+}
+export function isDateBetween(date, startDate, endDate) {
+    const targetDate = date;
+    return targetDate >= startDate && targetDate < endDate;
+}
+export function toDate(value) {
+    let result = undefined;
+    if (value) {
+        if (value instanceof Date) {
+            result = value;
+        }
+        else if (typeof value == 'number') {
+            result = millisToDate(value);
+        }
+        else if (typeof value == 'string' && !isNaN(value)) {
+            result = millisToDate(parseInt(value));
+        }
+        else if (typeof value == 'string') {
+            result = moment(value).toDate();
+        }
+        else if (value.seconds) {
+            result = timestampToDate(value);
+        }
+    }
+    return result;
+}

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

@@ -0,0 +1,96 @@
+import { ImageCaptureEnum, type ImageCaptures, type OutputImageFormats } from '../utils/image-service';
+import { type CropperDialogProps, type DialogProps, type DialogSize, type InputFieldProps, type PickerDialogProps } from '../../views/index.js';
+export declare enum DialogSizeEnum {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    FULL = "full"
+}
+export type PickerDialogPropsType = {
+    items?: any[];
+    itemTitle?: string;
+    itemSubtitle?: string;
+    hasArrow?: boolean;
+    hasCheck?: boolean;
+    multiple?: boolean;
+    okButtonLabel?: string;
+    okButtonClassName?: string;
+    closeButtonLabel?: string;
+    closeButtonClassName?: string;
+    identity?: string;
+    value?: any | any[];
+    search?: string | string[];
+};
+export declare function openDialog<R>(props?: DialogProps): Promise<R>;
+export declare function openConfirmDialog(params?: DialogProps & {
+    msg?: string;
+}): Promise<unknown>;
+export declare function openAlertDialog(params?: DialogProps & {
+    msg?: string;
+}): Promise<unknown>;
+export declare function openDeleteConfirmDialog({ msg, title, footerOkButtonLabel, footerOkButtonClassName, ...params }?: DialogProps & {
+    msg?: string;
+}): Promise<unknown>;
+export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, hasIcon, iconPath, iconClassName, isCircularIcon, circularIconClassName, itemTileSnippet, ...params }: DialogProps & PickerDialogProps): Promise<R>;
+export declare function openNumberFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
+    fieldClassName?: string;
+}): Promise<unknown>;
+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 & {
+    fieldClassName?: string;
+}): Promise<unknown>;
+export declare function openLoadingDialog({ msg, loadingDialogContainerClassName, loadingDialogClassName, loadingDialogSpinnerClassName, loadingDialogMsgClassName, ...params }?: DialogProps & {
+    msg?: string;
+    loadingDialogContainerClassName?: string;
+    loadingDialogClassName?: string;
+    loadingDialogSpinnerClassName?: string;
+    loadingDialogMsgClassName?: string;
+}): Promise<any>;
+/**
+ * Return Cropped Image DataUrl
+ * @param props
+ * @returns
+ */
+export declare function openCropperDialog<T, R>({ outputWidth, outputFormat, outputQuality, outputType, inputImageFile, className, outputAspectRatio, ...params }: DialogProps & CropperDialogProps): 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?: string | string[], options?: {
+    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<T extends File | File[]>(accepts?: string | string[], options?: {
+    multiple?: boolean;
+    capture?: ImageCaptures;
+    maxWidth?: number;
+    maxHeight?: number;
+    maxSizeInBytes?: number;
+    outputFormat?: OutputImageFormats;
+    quality?: number;
+}): Promise<T | null>;
+export declare function openImagePickerDialogWithCropper({ outputFormat, outputWidth, outputQuality, outputAspectRatio, dialogSize, capture, maxHeight, maxSizeInBytes, maxWidth, quality }?: {
+    outputFormat?: OutputImageFormats;
+    outputWidth?: number;
+    outputQuality?: number;
+    outputAspectRatio?: number;
+    dialogSize?: DialogSize;
+    capture?: ImageCaptureEnum;
+    maxWidth?: number;
+    maxHeight?: number;
+    maxSizeInBytes?: number;
+    quality?: number;
+}): Promise<File | null>;