inviton-powerduck 0.0.130 → 0.0.132

package/components/input/wysiwig.tsx

@@ -62,6 +62,7 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 	@Prop() onResized?: (height: number) => void;
 	@Prop({ default: true }) resizable: boolean;
 	skipTrigger: boolean = false;
+	resizeObserver: ResizeObserver = null;
 
 	raiseChangeEvent(value: string) {
 		this.populateValidationDeclaration();
@@ -170,7 +171,7 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 
 		let lastNotifiedHeight = this.initialHeight || null;
 		if (this.onResized != null && this.resizable) {
-			const resizeObserver = new ResizeObserver((entries) => {
+			this.resizeObserver = new ResizeObserver((entries) => {
 				for (const entry of entries) {
 					const height = entry?.contentRect?.height;
 					if (height > 0 && (lastNotifiedHeight == null || Math.abs(height - lastNotifiedHeight) > 2)) { // To keep height stable
@@ -180,7 +181,7 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 				}
 			});
 
-			resizeObserver.observe(innerEditor[0]);
+			this.resizeObserver.observe(innerEditor?.[0]);
 		}
 
 		innerEditor.on('click', (e) => {
@@ -224,6 +225,13 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 
 	beforeUnmount() {
 		($(this.$el) as any).trumbowyg('destroy');
+
+		if (this.resizeObserver != null) {
+			const innerEditor = $(this.$el).find('.trumbowyg-box');
+			if (innerEditor?.length > 0) {
+				this.resizeObserver.unobserve(innerEditor[0]);
+			}
+		}
 	}
 
 	buildImageDropdownArr(): string[] {

package/components/modal/css/modal.css

@@ -9,34 +9,34 @@
 	padding-bottom: 20px;
 }
 
-.modal-header.modal-has-headericon > h5 {
+.modal-header.modal-has-headericon>h5 {
 	display: flex;
 	width: 100%;
 	min-height: 60px;
 	align-items: center;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon {
+.modal-header.modal-has-headericon>.modal-header-icon {
 	position: absolute;
 	top: 0;
 	left: 22px;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize {
 	transform: scale(0.75);
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize.swal2-icon,
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize .swal2-icon {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize.swal2-icon,
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize .swal2-icon {
 	margin-top: 10px;
 	margin-left: -10px;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-transform-resize .success-icon-stub {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-transform-resize .success-icon-stub {
 	border-color: #b9f0b7;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon .swal2-standard-resize {
+.modal-header.modal-has-headericon>.modal-header-icon .swal2-standard-resize {
 	font-size: 40px;
 	line-height: 60px;
 	text-align: center;
@@ -44,7 +44,7 @@
 	height: 60px;
 }
 
-.modal-header.modal-has-headericon > .modal-header-icon > .swal2-icon {
+.modal-header.modal-has-headericon>.modal-header-icon>.swal2-icon {
 	overflow: hidden;
 }
 
@@ -59,3 +59,84 @@
 .modal-dialog.modal-ntl {
 	max-width: 650px;
 }
+
+@media(max-width:767.99px) {
+	.modal-bottom-sheet .modal-dialog {
+		position: fixed !important;
+		bottom: 0 !important;
+		margin: 0 !important;
+		width: 100% !important;
+		max-width: 100%;
+		transition: transform 0.3s ease-out !important;
+	}
+
+	.modal-bottom-sheet .modal-dialog .modal-content {
+		border-top-left-radius: 16px;
+		border-top-right-radius: 16px;
+		padding-top: 0;
+	}
+
+	/* Drag handle */
+	.modal-bottom-sheet .drag-handle {
+		width: 100%;
+		padding-top: 10px;
+		padding-bottom: 5px;
+		cursor: grab;
+	}
+
+	.modal-bottom-sheet .handle-bar {
+		width: 40px;
+		height: 4px;
+		background-color: #ccc;
+		border-radius: 2px;
+		margin: 0 auto;
+	}
+
+	.modal.modal-bottom-sheet.fade .modal-dialog {
+		transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+		transform: translateY(100%);
+		opacity: 0;
+	}
+
+	.modal.modal-bottom-sheet.fade.show .modal-dialog {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	.modal-is-dragging,
+	.modal-is-dragging * {
+		user-select: none;
+	}
+
+	.modal.modal-bottom-sheet.fade.modal-is-dragging .modal-dialog {
+		transition: none !important;
+	}
+
+	.modal.modal-bottom-sheet .modal-body {
+		max-height: 80vh;
+		overflow: auto;
+	}
+
+
+	.modal.fade.modal-mobile-fullscreen .modal-dialog {
+		margin: 0;
+		max-width: 100%;
+		border-radius: 0;
+	}
+
+	.modal.fade.modal-mobile-fullscreen .modal-dialog .modal-content,
+	.modal.fade.modal-mobile-fullscreen .modal-dialog .modal-header {
+		border-radius: 0;
+		border-top: 0;
+		border-left: 0;
+		border-right: 0;
+	}
+
+	.modal.fade.modal-mobile-fullscreen .modal-dialog .modal-footer {
+		position: sticky;
+		bottom: 0;
+		z-index: 1;
+		background: inherit;
+	}
+
+}

package/components/modal/modal.tsx

@@ -18,14 +18,20 @@ interface ModalArgs {
 	icon?: ModalHeaderIcon;
 	blocked?: boolean;
 	cssClass?: string;
+	mobileMode?: ModalMobileMode;
 	dismissable?: boolean;
 	backdropStatic?: boolean;
-	mobileFullscreen?: boolean;
 	modalLazyMode?: boolean;
 	preventHistoryEntry?: boolean;
 	portalTarget?: string;
 }
 
+export enum ModalMobileMode {
+	Default = 0,
+	BottomSheetModal = 1,
+	FullScreen = 2,
+}
+
 export enum ModalSize {
 	Normal = 0,
 	Small = 1,
@@ -52,6 +58,7 @@ declare global {
 
 export class ModalConfig {
 	static defaultPortalTarget = 'body';
+	static defaultMobileMode = ModalMobileMode.BottomSheetModal;
 }
 
 @Component
@@ -63,10 +70,9 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 	@Prop() cssClass!: string;
 	@Prop() dismissable: boolean;
 	@Prop() backdropStatic!: boolean;
-	@Prop() mobileFullscreen: boolean;
+	@Prop() mobileMode?: ModalMobileMode;
 	@Prop() modalLazyMode: boolean;
 	@Prop() preventHistoryEntry: boolean;
-	@Prop() alternativePortal: boolean;
 	uuid: string = null;
 	modalShown: boolean = false;
 
@@ -98,6 +104,129 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 		}
 	}
 
+	private getModalMobileModeCss(): string {
+		if (this.treatMobileAsBottomSheet()) {
+			return ' modal-bottom-sheet';
+		} else if (this.treatMobileAsFullScreen()) {
+			return ' modal-mobile-fullscreen';
+		}
+
+		return '';
+	}
+
+	private handleMobileModeDragBinding() {
+		if (!this.treatMobileAsBottomSheet()) {
+			return;
+		}
+
+		const modal = this.$refs.modalRoot as HTMLElement;
+		if ((modal as any)?._dragBound) {
+			return;
+		}
+
+		setTimeout(() => {
+			const modal = this.$refs.modalRoot as HTMLElement;
+			const modalDialog = modal.querySelector('.modal-dialog') as HTMLElement;
+			const dragHandle = modal.querySelector('.drag-handle');
+
+			let startY = 0;
+			let currentY = 0;
+			let isDragging = false;
+			const threshold = 100;
+			const cancelDragging = () => {
+				isDragging = false;
+				modal.classList.remove('modal-is-dragging');
+			};
+
+			const startDragging = () => {
+				isDragging = true;
+				modal.classList.add('modal-is-dragging');
+			};
+
+			const onMove = (y) => {
+				const translateY = Math.max(y - startY, 0);
+				modalDialog.style.transform = `translateY(${translateY}px)`;
+			};
+
+			const endDrag = () => {
+				cancelDragging();
+				const dragDistance = currentY - startY;
+
+				if (dragDistance > threshold) {
+					this.hide();
+				} else {
+					modalDialog.style.transform = 'translateY(0)';
+				}
+			};
+
+			// Touch events
+			dragHandle.addEventListener('touchstart', (e) => {
+				startY = (e as TouchEvent).touches[0].clientY;
+				startDragging();
+			});
+
+			dragHandle.addEventListener('touchmove', (e) => {
+				if (!isDragging) {
+					return;
+				}
+
+				currentY = (e as TouchEvent).touches[0].clientY;
+				onMove(currentY);
+			});
+
+			dragHandle.addEventListener('touchend', endDrag);
+
+			// Mouse events
+			dragHandle.addEventListener('mousedown', (e) => {
+				startY = (e as MouseEvent).clientY;
+				startDragging();
+
+				const onMouseMove = (e) => {
+					if (!isDragging) {
+						return;
+					}
+
+					currentY = e.clientY;
+					onMove(currentY);
+					e.preventDefault();
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+				};
+
+				const onMouseUp = () => {
+					endDrag();
+					window.removeEventListener('mousemove', onMouseMove);
+					window.removeEventListener('mouseup', onMouseUp);
+				};
+
+				window.addEventListener('mousemove', onMouseMove);
+				window.addEventListener('mouseup', onMouseUp);
+			});
+
+			// Reset on modal hide
+			modal.addEventListener('hidden.bs.modal', () => {
+				cancelDragging();
+				modalDialog.style.transform = '';
+			});
+
+			(modal as any)._dragBound = true;
+		}, 100);
+	}
+
+	treatMobileAsBottomSheet(): boolean {
+		if (this.mobileMode == ModalMobileMode.BottomSheetModal) {
+			return true;
+		} else if (this.mobileMode == null && ModalConfig.defaultMobileMode == ModalMobileMode.BottomSheetModal) {
+			return true;
+		}
+
+		return false;
+	}
+
+	treatMobileAsFullScreen(): boolean {
+		return (this.mobileMode == ModalMobileMode.FullScreen || (this.mobileMode == null && ModalConfig.defaultMobileMode == ModalMobileMode.FullScreen));
+	}
+
 	getModalInstance(): BootstrapModal {
 		return BootstrapModal.getOrCreateInstance(this.$refs.modalRoot as Element);
 	}
@@ -112,6 +241,8 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 				onHidden: args.onHidden,
 				onBeforeShown: args.onBeforeShown,
 			});
+
+			this.handleMobileModeDragBinding();
 		});
 	}
 
@@ -133,7 +264,7 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 					id={this.getFullId()}
 					key={this.getFullId()}
 					ref="modalRoot"
-					class={`modal fade ${this.mobileFullscreen ? 'mobile-fullscreen ' : ''}${this.cssClass || ''}`}
+					class={`modal fade${this.getModalMobileModeCss()} ${this.cssClass || ''}`}
 					role="dialog"
 					aria-labelledby={this.getLabelId()}
 					aria-hidden="true"
@@ -144,6 +275,10 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 				>
 					<div class={`modal-dialog${this.getModalSizeCss()}`} role="document">
 						<div class="modal-content">
+							<div class="drag-handle text-center">
+								<div class="handle-bar"></div>
+							</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>}

package/package.json

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