inviton-powerduck 0.0.130 → 0.0.133

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

@@ -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/components/svg/skilift-svg.tsx

@@ -1,6 +1,6 @@
-export const SKILIFT_SVG: string = `
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
-  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
-    <path d="M3911 4254 l-1153 -354 -40 34 c-77 66 -211 76 -290 20 -57 -40 -107 -107 -114 -153 l-6 -38 -1127 -345 -1126 -345 -3 -103 c-2 -94 -1 -102 15 -98 10 3 529 161 1154 353 l1135 347 43 -28 42 -29 -5 -55 c-2 -30 -21 -279 -42 -552 l-38 -498 -360 0 c-200 0 -390 -5 -426 -11 -173 -27 -319 -153 -371 -320 -18 -56 -19 -99 -19 -594 0 -495 1 -538 19 -594 50 -161 183 -281 350 -317 98 -20 1924 -20 2022 0 167 36 300 156 350 317 18 56 19 99 19 588 0 444 -2 536 -16 586 -44 170 -197 307 -374 335 -36 5 -227 10 -426 10 l-360 0 -38 498 c-21 273 -40 522 -43 552 -5 53 -4 56 25 73 40 23 72 69 93 131 l17 49 153 48 c85 26 309 95 499 153 852 260 1595 488 1598 490 1 2 1 48 0 103 l-3 100 -1154 -353z m-1913 -2666 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z"/>
-  </g>
-</svg>`;
+export const SKILIFT_SVG: string = `
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
+    <path d="M3911 4254 l-1153 -354 -40 34 c-77 66 -211 76 -290 20 -57 -40 -107 -107 -114 -153 l-6 -38 -1127 -345 -1126 -345 -3 -103 c-2 -94 -1 -102 15 -98 10 3 529 161 1154 353 l1135 347 43 -28 42 -29 -5 -55 c-2 -30 -21 -279 -42 -552 l-38 -498 -360 0 c-200 0 -390 -5 -426 -11 -173 -27 -319 -153 -371 -320 -18 -56 -19 -99 -19 -594 0 -495 1 -538 19 -594 50 -161 183 -281 350 -317 98 -20 1924 -20 2022 0 167 36 300 156 350 317 18 56 19 99 19 588 0 444 -2 536 -16 586 -44 170 -197 307 -374 335 -36 5 -227 10 -426 10 l-360 0 -38 498 c-21 273 -40 522 -43 552 -5 53 -4 56 25 73 40 23 72 69 93 131 l17 49 153 48 c85 26 309 95 499 153 852 260 1595 488 1598 490 1 2 1 48 0 103 l-3 100 -1154 -353z m-1913 -2666 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z"/>
+  </g>
+</svg>`;

package/package.json

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