inviton-powerduck 0.0.177 → 0.0.179

package/components/input/plugins/daterangepicker/daterangepicker.css

@@ -107,14 +107,6 @@
 	position: relative;
 }
 
-.date-range-picker-wrapper .month-wrapper-inner {
-	margin-top: -20px;
-}
-
-.date-range-picker-wrapper .month-wrapper-inner table {
-	margin-top: 20px;
-}
-
 .date-range-picker-root.date-range-picker-modalmode .date-range-picker-wrapper {
 	margin: auto;
 }

package/components/input/plugins/daterangepicker/jquery.daterangepicker.ts

@@ -432,6 +432,7 @@ import { globalState } from '../../../../app/global-state';
 		customValueLabel: string
 		customValues: any[]
 		getCellHtml?: (args: DaterangePickerArgsCustomCellRenderArgs) => string;
+		enableSwipeDebug: boolean; // Enable mouse dragging to simulate touch swipe (for debugging)
 		showDateFilter?: (date: Temporal.PlainDateTime, day: number) => string | number
 	}
 
@@ -508,6 +509,7 @@ import { globalState } from '../../../../app/global-state';
 				customArrowNextSymbol: null,
 				monthSelect: false,
 				yearSelect: false,
+				enableSwipeDebug: false, // Enable mouse dragging to simulate touch swipe (for debugging)
 			},
 			opt,
 		);
@@ -531,6 +533,10 @@ import { globalState } from '../../../../app/global-state';
 			singleMonth = ($(window).width() < 480) as any;
 		}
 
+        if (($(window).width() < 480)) {
+            singleMonth = true;
+        }
+
 		if (singleMonth) {
 			opt.stickyMonths = false;
 		}
@@ -827,6 +833,302 @@ import { globalState } from '../../../../app/global-state';
 				showSelectedDays();
 			}
 
+			// Add swipe support for mobile date navigation with preview
+			// Debug: Set enableSwipeDebug: true in options to enable mouse dragging simulation
+			const enableSwipe = opt.isTouchDevice || opt.enableSwipeDebug;
+
+			if (enableSwipe) {
+				let touchStartX = 0;
+				let touchStartY = 0;
+				let touchEndX = 0;
+				let touchEndY = 0;
+				let isSwiping = false;
+				let swipeDirection: 'left' | 'right' | null = null;
+				const monthWrapperInner = box.find('.month-wrapper-inner');
+				let previewMonthContainer: JQuery<HTMLElement> = null;
+
+				const createPreviewMonth = (direction: 'left' | 'right') => {
+					// Clean up any existing preview
+					if (previewMonthContainer) {
+						previewMonthContainer.remove();
+						previewMonthContainer = null;
+					}
+
+					let previewDate: Temporal.PlainDateTime;
+
+					if (direction === 'right') {
+						// Swiping right shows previous month
+						previewDate = prevMonth(opt.month1);
+						if (isMonthOutOfBounds(previewDate)) return;
+					} else {
+						// Swipe left shows next month
+						previewDate = opt.singleDate || opt.singleMonth
+							? nextMonth(opt.month1)
+							: nextMonth(opt.month2);
+						if (isMonthOutOfBounds(previewDate)) return;
+					}
+
+					// Clone the entire month-wrapper-inner to get exact same structure
+					previewMonthContainer = monthWrapperInner.clone();
+					previewMonthContainer.removeClass().addClass('swipe-preview-month-wrapper-inner month-wrapper-inner-common');
+
+					// Update only the first month's content (since we're showing single month preview)
+					const monthName = nameMonth(previewDate.month);
+					previewMonthContainer.find('.month1 .month-name').html(`${monthName}${opt.hideYearInMonthName ? '' : ` ${previewDate.year}`}`);
+					previewMonthContainer.find('.month1 tbody').html(createMonthHTML(previewDate));
+
+					// Hide month2 if it exists in the clone
+					previewMonthContainer.find('.month2').hide();
+					previewMonthContainer.find('.gap').hide();
+
+					// Calculate exact pixel position to avoid gaps
+					const containerWidth = monthWrapperInner.outerWidth(true); // Include margins
+					const leftPosition = direction === 'right' ? -containerWidth : containerWidth;
+
+					// Position preview based on swipe direction - use exact pixel positioning
+					previewMonthContainer.css({
+						position: 'absolute',
+						top: monthWrapperInner.position().top + 'px',
+						left: leftPosition + 'px',
+						width: monthWrapperInner.outerWidth() + 'px',
+						pointerEvents: 'none',
+						transform: 'translateX(0)', // Start with no transform offset
+						'margin-top': monthWrapperInner.css('margin-top'),
+						'margin-bottom': monthWrapperInner.css('margin-bottom'),
+						'margin-left': '0',
+						'margin-right': '0'
+					});
+
+					// Append as sibling to monthWrapperInner (same parent)
+					monthWrapperInner.parent().append(previewMonthContainer);
+				};
+
+				// Setup container for swipe - add overflow hidden and relative positioning
+				const monthWrapper = box.find('.month-wrapper');
+				monthWrapper.css({
+					'overflow': 'hidden',
+					'position': 'relative'
+				});
+
+				// Helper function to handle start event (touch or mouse)
+				const handleDragStart = (clientX: number, clientY: number) => {
+					touchStartX = clientX;
+					touchStartY = clientY;
+					touchEndX = clientX;
+					touchEndY = clientY;
+					isSwiping = false;
+					swipeDirection = null;
+
+					// Remove transition for immediate response
+					monthWrapperInner.css('transition', 'none');
+					if (previewMonthContainer) {
+						previewMonthContainer.css('transition', 'none');
+					}
+				};
+
+				box.find('.month-wrapper').on('touchstart', (e) => {
+					const touch = e.touches?.[0] || (e as any).originalEvent?.touches?.[0];
+					if (touch) {
+						handleDragStart(touch.clientX, touch.clientY);
+					}
+				});
+
+				// Mouse drag support (debug mode)
+				if (opt.enableSwipeDebug) {
+					let isMouseDown = false;
+
+					box.find('.month-wrapper').on('mousedown', (e) => {
+						isMouseDown = true;
+						handleDragStart(e.clientX, e.clientY);
+						e.preventDefault(); // Prevent text selection
+					});
+
+					$(document).on('mouseup', () => {
+						if (isMouseDown && isSwiping) {
+							isMouseDown = false;
+							// Trigger the same end logic as touchend
+							box.find('.month-wrapper').trigger('dragend');
+						}
+						isMouseDown = false;
+					});
+
+					box.find('.month-wrapper').on('mousemove', (e) => {
+						if (!isMouseDown) return;
+
+						touchEndX = e.clientX;
+						touchEndY = e.clientY;
+
+						const deltaX = touchEndX - touchStartX;
+						const deltaY = touchEndY - touchStartY;
+						const absDeltaX = Math.abs(deltaX);
+						const absDeltaY = Math.abs(deltaY);
+
+						// Only apply visual feedback if horizontal swipe is dominant
+						if (absDeltaX > absDeltaY && absDeltaX > 10) {
+							if (!isSwiping) {
+								isSwiping = true;
+								swipeDirection = deltaX > 0 ? 'right' : 'left';
+								createPreviewMonth(swipeDirection);
+							}
+
+							// Apply transform to show dragging effect - both move at same speed
+							monthWrapperInner.css('transform', `translateX(${deltaX}px)`);
+
+							// Move preview container in sync at the same speed
+							if (previewMonthContainer) {
+								const baseOffset = swipeDirection === 'right' ? '-100%' : '100%';
+								previewMonthContainer.css({
+									'left': baseOffset,
+									'transform': `translateX(${deltaX}px)`
+								});
+							}
+
+							e.preventDefault();
+						}
+					});
+				}
+
+				box.find('.month-wrapper').on('touchmove', (e) => {
+					const touch = e.touches?.[0] || (e as any).originalEvent?.touches?.[0];
+					if (touch) {
+						touchEndX = touch.clientX;
+						touchEndY = touch.clientY;
+
+						const deltaX = touchEndX - touchStartX;
+						const deltaY = touchEndY - touchStartY;
+						const absDeltaX = Math.abs(deltaX);
+						const absDeltaY = Math.abs(deltaY);
+
+						// Only apply visual feedback if horizontal swipe is dominant
+						if (absDeltaX > absDeltaY && absDeltaX > 10) {
+							if (!isSwiping) {
+								isSwiping = true;
+								swipeDirection = deltaX > 0 ? 'right' : 'left';
+								createPreviewMonth(swipeDirection);
+							}
+
+							// Apply transform to show dragging effect - both move at same speed
+							monthWrapperInner.css('transform', `translateX(${deltaX}px)`);
+
+							// Move preview container in sync at the same speed
+							if (previewMonthContainer) {
+								// Preview starts at -100% (left) or 100% (right) of container width
+								// As we drag, it moves the same distance as the main calendar
+								const baseOffset = swipeDirection === 'right' ? '-100%' : '100%';
+								previewMonthContainer.css({
+									'left': baseOffset,
+									'transform': `translateX(${deltaX}px)`
+								});
+							}
+
+							// Prevent default scrolling when swiping horizontally
+							e.preventDefault();
+						}
+					}
+				});
+
+				// Shared drag end logic for both touch and mouse
+				const handleDragEnd = () => {
+					const deltaX = touchEndX - touchStartX;
+					const deltaY = touchEndY - touchStartY;
+					const absDeltaX = Math.abs(deltaX);
+					const absDeltaY = Math.abs(deltaY);
+
+					// Calculate if user dragged past 40% of the width
+					const containerWidth = monthWrapperInner.width();
+					const dragThreshold = containerWidth * 0.4;
+					const shouldChangeMonth = isSwiping && absDeltaX > dragThreshold && absDeltaX > absDeltaY;
+
+					if (shouldChangeMonth) {
+						// Add smooth transition for the slide completion
+						monthWrapperInner.css('transition', 'transform 0.3s ease-out');
+						if (previewMonthContainer) {
+							previewMonthContainer.css('transition', 'transform 0.3s ease-out');
+						}
+
+						// Complete the slide animation
+						const fullDistance = deltaX > 0 ? containerWidth : -containerWidth;
+						monthWrapperInner.css('transform', `translateX(${fullDistance}px)`);
+						if (previewMonthContainer) {
+							previewMonthContainer.css('transform', `translateX(${fullDistance}px)`);
+						}
+
+						// After animation, change the month and reset
+						setTimeout(() => {
+							if (deltaX > 0) {
+								// Swipe right - go to previous month
+								const prevButton = box.find('.month1 .prev');
+								if (prevButton.length > 0) {
+									if (!opt.stickyMonths) {
+										gotoPrevMonth(prevButton[0]);
+									} else {
+										gotoPrevMonth_stickily(prevButton[0]);
+									}
+								}
+							} else {
+								// Swipe left - go to next month
+								const nextButton = opt.singleDate || opt.singleMonth
+									? box.find('.month1 .next')
+									: box.find('.month2 .next');
+								if (nextButton.length > 0) {
+									if (!opt.stickyMonths) {
+										gotoNextMonth(nextButton[0]);
+									} else {
+										gotoNextMonth_stickily(nextButton[0]);
+									}
+								}
+							}
+
+							// Clean up
+							monthWrapperInner.css({
+								'transition': 'none',
+								'transform': 'translateX(0)'
+							});
+							if (previewMonthContainer) {
+								previewMonthContainer.remove();
+								previewMonthContainer = null;
+							}
+						}, 300);
+					} else {
+						// Snap back to original position
+						monthWrapperInner.css('transition', 'transform 0.3s ease-out');
+						monthWrapperInner.css('transform', 'translateX(0)');
+
+						if (previewMonthContainer) {
+							previewMonthContainer.css('transition', 'transform 0.3s ease-out');
+							previewMonthContainer.css('transform', 'translateX(0)');
+
+							setTimeout(() => {
+								if (previewMonthContainer) {
+									previewMonthContainer.remove();
+									previewMonthContainer = null;
+								}
+							}, 300);
+						}
+					}
+
+					// Reset values
+					touchStartX = 0;
+					touchStartY = 0;
+					touchEndX = 0;
+					touchEndY = 0;
+					isSwiping = false;
+					swipeDirection = null;
+				};
+
+				// Attach touchend handler
+				box.find('.month-wrapper').on('touchend', () => {
+					handleDragEnd();
+				});
+
+				// Attach dragend handler for mouse (debug mode)
+				if (opt.enableSwipeDebug) {
+					box.find('.month-wrapper').on('dragend', () => {
+						handleDragEnd();
+					});
+				}
+			}
+
 			box.attr('unselectable', 'on')
 				.css('user-select', 'none')
 				.bind('selectstart', (e) => {
@@ -2087,13 +2389,13 @@ import { globalState } from '../../../../app/global-state';
 				return;
 			}
 
-            let afterAnimFired = false
+			let afterAnimFired = false
 			const afterAnim = function () {
-                if (afterAnimFired) {
-                    return;
-                }
+				if (afterAnimFired) {
+					return;
+				}
 
-                afterAnimFired = true;
+				afterAnimFired = true;
 				box.hide();
 				$(self).data('date-picker-opened', false);
 				$(self).trigger('datepicker-closed', {
@@ -2110,8 +2412,8 @@ import { globalState } from '../../../../app/global-state';
 				box.addClass('pd-dropdown-close-animation');
 				const timeout = setTimeout(afterAnim, 450)
 				box.one('animationend', () => {
-						clearTimeout(timeout)
-						afterAnim()
+					clearTimeout(timeout)
+					afterAnim()
 				});
 			}
 
@@ -2204,7 +2506,7 @@ import { globalState } from '../../../../app/global-state';
 			let arrowNext = '&gt;';
 			if (opt.customArrowNextSymbol) { arrowNext = opt.customArrowNextSymbol; }
 
-			html += `<div class="month-wrapper"><div class="month-wrapper-inner">`
+			html += `<div class="month-wrapper"><div class="month-wrapper-inner month-wrapper-inner-common">`
 				+ `   <table class="month1" cellspacing="0" border="0" cellpadding="0">`
 				+ `       <thead>`
 				+ `           <tr class="caption">`

package/components/modal/modal.tsx

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { ModalOnBeforeShownArgs, ModalOnShownArgs } from './modal-utils';
 import { Modal as BootstrapModal } from 'bootstrap';
 import { Prop, toNative } from 'vue-facing-decorator';
@@ -60,6 +61,7 @@ declare global {
 export class ModalConfig {
 	static defaultPortalTarget = 'body';
 	static defaultMobileMode = ModalMobileMode.BottomSheetModal;
+	static renderModalHeaderIcon: (icon: ModalHeaderIcon) => VNode = null;
 }
 
 @Component
@@ -281,6 +283,7 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 							</div>
 
 							<LoadingIndicator visible={this.blocked} />
+
 							<div class={`modal-header${this.icon == null ? '' : ' modal-has-headericon'}`}>
 								{this.icon != null && <div class="modal-header-icon">{this.renderModalHeaderIcon()}</div>}
 
@@ -300,6 +303,10 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 	}
 
 	renderModalHeaderIcon() {
+		if (ModalConfig.renderModalHeaderIcon != null) {
+			return ModalConfig.renderModalHeaderIcon(this.icon);
+		}
+
 		if (this.icon == ModalHeaderIcon.Warning) {
 			return <ModalIconWarning visible={true} />;
 		} else if (this.icon == ModalHeaderIcon.Success) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.177",
+	"version": "0.0.179",
 	"files": [
 		"app/",
 		"common/",