inviton-powerduck 0.0.129 → 0.0.132

package/common/localized-value-helper.ts

@@ -38,7 +38,10 @@ export default class LocalizedValueHelper {
 		}
 
 		for (const propKey in value) {
-			return value[propKey];
+			const val = value[propKey];
+			if (val?.length > 0) {
+				return val;
+			}
 		}
 
 		return null as any;

package/components/datatable/datatable.tsx

@@ -891,7 +891,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 		}
 	}
 
-	markSelection(): void {
+	markSelection (): void {
 		const mySelf = this;
 		const escapeRegExp = function (string) {
 			return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
@@ -909,26 +909,55 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 		};
 
 		let regexBuilder = '';
-		const markArr: string[] = [];
+		const markArr = [];
 		if (this.filterArr != null) {
 			this.filterArr.forEach((filterItem) => {
 				if (regexBuilder.length > 0) {
 					regexBuilder += '|';
 				}
 
+				const columnId = filterItem.PropertyName?.toLowerCase();
+				const tds = Array.from($(mySelf.$el).find(`td.dt-col-${columnId}`));
+				if (tds == null || tds.length == 0) {
+					return;
+				}
+
 				(getValueArr(filterItem) || []).forEach((filterValue) => {
-					markArr.push(escapeRegExp(filterValue));
+					markArr.push({
+						value: escapeRegExp(filterValue),
+						elements: tds,
+					});
 				});
 			});
 		}
 
 		if (!isNullOrEmpty(this.fullTextQuery)) {
-			regexBuilder += escapeRegExp(this.fullTextQuery);
+			const value = escapeRegExp(this.fullTextQuery);
+			const tds = Array.from($(mySelf.$el).find(`td`));
+			regexBuilder += value;
+
+			markArr.push({
+				value,
+				elements: tds,
+			});
 		}
 
 		if (DataTableConfig.filterMarking) {
 			this.unmarkSelection(() => {
-				mySelf.markInstance.mark(markArr);
+				for (const item of markArr) {
+					this.markInstance.mark(item.value, {
+						filter: (node) => {
+							const parentTd = $(node).closest('td')[0];
+							if (!parentTd) {
+								return false;
+							}
+
+							const matchesColumn = item.elements?.some(el => parentTd?.isEqualNode(el));
+							const matchesText = parentTd?.textContent?.toLowerCase().includes(item.value.toLowerCase());
+							return matchesColumn && matchesText;
+						}
+					});
+				}
 			});
 		}
 	}

package/components/input/localized-string-wysiwyg.tsx

@@ -40,6 +40,7 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	currentValue: ILocalizedText = null;
+	editorHeight: number = null;
 
 	raiseChangeEvent(newValue: ILocalizedText): void {
 		this.populateValidationDeclaration();
@@ -59,6 +60,10 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 		this.raiseChangeEvent(value);
 	}
 
+	onEditorResized (height: number): void {
+		this.editorHeight = height;
+	}
+
 	getActualValue(lang: Language, value: ILocalizedText): string {
 		if (value == null) {
 			return null;
@@ -104,6 +109,8 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 								key={lang.id}
 								wrap={false}
 								resizable={this.resizable}
+								initialHeight={this.editorHeight}
+								onResized={this.onEditorResized}
 								label={null}
 								value={this.getActualValue(lang.id, this.value)}
 								changed={(e) => {

package/components/input/wysiwig.tsx

@@ -32,6 +32,8 @@ interface WysiwigEditorArgs extends FormItemWrapperArgs {
 	useCommonUpload?: boolean;
 	uploadPluginArgs?: () => any | any;
 	resizable?: boolean;
+	initialHeight?: number;
+	onResized?: (height: number) => void;
 	changed: (newValue: string) => void;
 }
 
@@ -56,8 +58,11 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	@Prop() changed: (newValue: string) => void;
+	@Prop() initialHeight: number = null;
+	@Prop() onResized?: (height: number) => void;
 	@Prop({ default: true }) resizable: boolean;
 	skipTrigger: boolean = false;
+	resizeObserver: ResizeObserver = null;
 
 	raiseChangeEvent(value: string) {
 		this.populateValidationDeclaration();
@@ -160,6 +165,25 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 			innerEditor.addClass('vertical-resize');
 		}
 
+		if (this.initialHeight) {
+			innerEditor.css('height', `${this.initialHeight}px`);
+		}
+
+		let lastNotifiedHeight = this.initialHeight || null;
+		if (this.onResized != null && this.resizable) {
+			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
+						lastNotifiedHeight = height;
+						this.onResized(height);
+					}
+				}
+			});
+
+			this.resizeObserver.observe(innerEditor?.[0]);
+		}
+
 		innerEditor.on('click', (e) => {
 			const clickTarget = e.target;
 			if (clickTarget != null && clickTarget.nodeName == 'IMG') {
@@ -201,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.129",
+	"version": "0.0.132",
 	"files": [
 		"app/",
 		"common/",