inviton-powerduck 0.0.366 → 0.0.368

package/app/powerduck-system-resources.ts

@@ -19,6 +19,8 @@ export interface IPowerduckSystemResources {
 	save: string;
 	search: string;
 	searchedValue: string;
+	from?: string;
+	to?: string;
 	image: string;
 	noResultsFound: string;
 	colVisLabel: string;

package/common/dialog-utils.ts

@@ -124,22 +124,27 @@ class DialogBuilder {
 	hasIcon: boolean = false;
 	id: string = null;
 	labelId: string = null;
+	isBottomSheet: boolean = false;
 
 	build(args: AppDialogArgs): string {
 		this.args = args;
 		this.id = `dyn-modal-${PortalUtils.randomString(6)}`;
 		this.labelId = `${this.id}label`;
 		this.hasIcon = args.icon != null;
+		this.isBottomSheet = this._treatAsBottomSheet();
 		this.builder = '';
 
 		this.builder
 			+= `<div id="${this.id}" key="${this.id
 			}" tabindex="-1" role="dialog" aria-labelledby="${this.labelId
-			}" data-bs-backdrop="true" data-bs-keyboard="true" class="modal fade modal-bottom-sheet${args.cssClass ? ` ${args.cssClass}` : ''
+			}" data-bs-backdrop="true" data-bs-keyboard="true" class="modal fade${this._getMobileModeCss()}${args.cssClass ? ` ${args.cssClass}` : ''
 			}">`;
 		this.builder += `  <div role="document" class="modal-dialog${args.size != null ? ` ${args.size}` : ''}">`;
 		this.builder += '    <div class="modal-content">';
-		this.builder += '      <div class="drag-handle text-center"><div class="handle-bar"></div></div>';
+
+		if (this.isBottomSheet) {
+			this.builder += '      <div class="drag-handle text-center"><div class="handle-bar"></div></div>';
+		}
 
 		this.builder += this._getHeader();
 		this.builder += this._getBody();
@@ -151,6 +156,29 @@ class DialogBuilder {
 		return this.builder;
 	}
 
+	/**
+	 * Mirrors the `Modal` component's `treatMobileAsBottomSheet()`: a dialog only docks to the
+	 * bottom as a sheet on an actual mobile device. `mobileMode` defaults to the bottom-sheet
+	 * behavior (matching the pre-existing drag-handle binding); 'default'/'fullscreen' opt out.
+	 */
+	private _treatAsBottomSheet(): boolean {
+		if (!PortalUtils.treatAsMobileDevice()) {
+			return false;
+		}
+
+		return this.args.mobileMode == null || this.args.mobileMode == 'bottom-sheet';
+	}
+
+	private _getMobileModeCss(): string {
+		if (this.isBottomSheet) {
+			return ' modal-bottom-sheet';
+		} else if (this.args.mobileMode == 'fullscreen') {
+			return ' modal-mobile-fullscreen';
+		}
+
+		return '';
+	}
+
 	private _getHeader(): string {
 		let innerBuilder = '';
 		innerBuilder += `<div class="modal-header${this.hasIcon ? ' modal-has-headericon' : ''}">`;
@@ -262,7 +290,7 @@ export class DialogUtils {
 			}, 50);
 		});
 
-		if (args.mobileMode == null || args.mobileMode == 'bottom-sheet') {
+		if (builder.isBottomSheet) {
 			const modal = document.getElementById(builder.id);
 			ModalUtils.bindModalBottomSheetHandle(() => modal, () => ModalUtils.hideModal(modalContext));
 		}

package/components/datatable/datatable.tsx

@@ -757,7 +757,10 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 					endTime: filterItem.DateTo,
 				};
 			} else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
-				// TODO: Implement
+				this.currentAdvancedFilterState[filterItem.PropertyName] = {
+					from: filterItem.NumFrom,
+					to: filterItem.NumTo,
+				};
 			} else if (filterItem.FilterType == DataTableFilterItemType.Text) {
 				this.currentAdvancedFilterState[filterItem.PropertyName] = filterItem.ContainsValue;
 			}
@@ -1237,6 +1240,57 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 		this.reloadData();
 	}
 
+	performNumericRangeFilter(dtColumn: TableColumn, data: { from: number | null; to: number | null } | null): void {
+		this.currentAdvancedFilterState[dtColumn.id] = data;
+
+		// A one-sided range (only from, or only to) is valid; empty means both bounds are missing.
+		const isEmpty = data == null || (data.from == null && data.to == null);
+		if (isEmpty) {
+			this.addFilterItem(dtColumn, {} as any);
+		}
+
+		const filterValue: DataTablePostBackFilterItem = {
+			PropertyName: dtColumn.id,
+			NumFrom: data?.from ?? undefined,
+			NumTo: data?.to ?? undefined,
+			FilterType: DataTableFilterItemType.NumericRange,
+		};
+
+		if (!this.filterDataHaveChanged(dtColumn, filterValue)) {
+			return;
+		}
+
+		if (isEmpty) {
+			this.addFilterItem(dtColumn, {} as any);
+		} else {
+			this.addFilterItem(dtColumn, filterValue);
+		}
+
+		if (this.preserveFilter == true) {
+			if (isEmpty) {
+				StorageHelper.storeFilter(this.id, null);
+			} else {
+				StorageHelper.storeFilter(this.id, filterValue);
+			}
+		}
+
+		if (this.handleClientsideFilter(false)) {
+			return;
+		}
+
+		// Immediate reload if changed, delay handled by the Dropdown component
+		this.reloadData();
+	}
+
+	private parseNumericFilterValue(raw: string): number | null {
+		if (isNullOrEmpty(raw)) {
+			return null;
+		}
+
+		const parsed = Number(raw);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
+
 	performClientsideFilter(): void {
 		this.rows = this.getClientsideFilteredAndSortedRows(this.loadedRows);
 	}
@@ -1348,7 +1402,20 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 						return false;
 					}
 
-					return filterData.NumFrom <= propVal && filterData.NumTo >= propVal;
+					const numVal = typeof propVal == 'number' ? propVal : Number(propVal);
+					if (Number.isNaN(numVal)) {
+						return false;
+					}
+
+					if (filterData.NumFrom != null && numVal < filterData.NumFrom) {
+						return false;
+					}
+
+					if (filterData.NumTo != null && numVal > filterData.NumTo) {
+						return false;
+					}
+
+					return true;
 				});
 			}
 		}
@@ -2038,7 +2105,10 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 				endTime: filterItem.DateTo,
 			};
 		} else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
-			console.warn('Numeric range filtering not implemented');
+			return {
+				from: filterItem.NumFrom,
+				to: filterItem.NumTo,
+			};
 		} else {
 			return null;
 		}
@@ -2402,7 +2472,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 					null,
 				);
 			} else if (filterType == DataTableFilterItemType.NumericRange) {
-				console.warn('Numeric range filtering not implemented');
+				this.performNumericRangeFilter(dtColumn, null);
 			}
 		};
 
@@ -2442,6 +2512,20 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 			return (<DaterangePicker label={null} cssClass="dt-filter-input" wrap={false} placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performDateRangeFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
 		} else if (filterType == DataTableFilterItemType.DateRangeWithTime) {
 			return (<DaterangePicker label={null} cssClass="dt-filter-input" wrap={false} placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performDateRangeFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} enableTime={true} autoClose={false} />);
+		} else if (filterType == DataTableFilterItemType.NumericRange) {
+			const numRange = this.currentAdvancedFilterState[dtColumn.id];
+			const fromRes = PowerduckState.getResourceValue('from');
+			const toRes = PowerduckState.getResourceValue('to');
+			const searchPlaceholder = PowerduckState.getResourceValue('search')[capitalize]();
+			const fromPlaceholder = isNullOrEmpty(fromRes) || fromRes.startsWith('{{') ? searchPlaceholder : fromRes[capitalize]();
+			const toPlaceholder = isNullOrEmpty(toRes) || toRes.startsWith('{{') ? searchPlaceholder : toRes[capitalize]();
+
+			return (
+				<div class="dt-filter-input dt-filter-numrange">
+					<TextBox updateMode="change" cssClass="dt-filter-numrange-from" wrap={false} label={null} autoCompleteEnabled={false} placeholder={fromPlaceholder} value={numRange?.from != null ? String(numRange.from) : ''} changed={(e) => { this.performNumericRangeFilter(dtColumn, { from: this.parseNumericFilterValue(e), to: numRange?.to ?? null }); }} />
+					<TextBox updateMode="change" cssClass="dt-filter-numrange-to" wrap={false} label={null} autoCompleteEnabled={false} placeholder={toPlaceholder} value={numRange?.to != null ? String(numRange.to) : ''} changed={(e) => { this.performNumericRangeFilter(dtColumn, { from: numRange?.from ?? null, to: this.parseNumericFilterValue(e) }); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />
+				</div>
+			);
 		}
 	}
 

package/components/loading-indicator/loading-indicator.css

@@ -1,87 +1,96 @@
-/*
- * LoadingIndicator styles — holdon-style overlay + SpinKit "sk-rect" spinner.
- *
- * LoadingIndicatorComponent (./index.tsx) emits the `.holdon-overlay` /
- * `.holdon-content` / `.sk-rect` / `.rect1..5` / `.sr-only` classes but the
- * stylesheet for them was never shipped with the component, so the spinner
- * bars rendered as unstyled (invisible) divs and the "Loading..." sr-only
- * label leaked as plain text (Bootstrap 5 dropped `.sr-only`). Added as part
- * of QA_AT-220 (DataTable loading preloader) so the reused LoadingIndicator
- * actually shows a centered, animated spinner everywhere it is mounted.
- */
-
-.holdon-element.holdon-overlay {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: rgba(255, 255, 255, 0.65);
-}
-
-.holdon-content {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* SpinKit "rect" — five bars that stretch in sequence. */
-.sk-rect {
-	width: 50px;
-	height: 42px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 3px;
-	text-align: center;
-	font-size: 10px;
-}
-
-.sk-rect > div {
-	background-color: #b3b3b3;
-	width: 6px;
-	height: 100%;
-	display: inline-block;
-	animation: holdon-sk-stretchdelay 1.2s infinite ease-in-out;
-}
-
-.sk-rect .rect2 {
-	animation-delay: -1.1s;
-}
-
-.sk-rect .rect3 {
-	animation-delay: -1s;
-}
-
-.sk-rect .rect4 {
-	animation-delay: -0.9s;
-}
-
-.sk-rect .rect5 {
-	animation-delay: -0.8s;
-}
-
-@keyframes holdon-sk-stretchdelay {
-	0%,
-	40%,
-	100% {
-		transform: scaleY(0.4);
-	}
-
-	20% {
-		transform: scaleY(1);
-	}
-}
-
-/* Screen-reader-only: hide the "Loading..." label visually (Bootstrap 5 has no .sr-only). */
-.holdon-element .sr-only {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
+/*
+ * LoadingIndicator styles — holdon-style overlay + SpinKit "sk-rect" spinner.
+ *
+ * LoadingIndicatorComponent (./index.tsx) emits the `.holdon-overlay` /
+ * `.holdon-content` / `.sk-rect` / `.rect1..5` / `.sr-only` classes but the
+ * stylesheet for them was never shipped with the component, so the spinner
+ * bars rendered as unstyled (invisible) divs and the "Loading..." sr-only
+ * label leaked as plain text (Bootstrap 5 dropped `.sr-only`). Added as part
+ * of QA_AT-220 (DataTable loading preloader) so the reused LoadingIndicator
+ * actually shows a centered, animated spinner everywhere it is mounted.
+ *
+ * COLLISION CONTRACT (gap-regression follow-up): host apps commonly ship the
+ * original HoldOn.js CSS globally (e.g. an inline <style> in index.html that
+ * styles their boot overlay and injected blockers) and it targets these SAME
+ * class names. This sheet must therefore behave as a DEFAULT, never an
+ * override:
+ *  - the overlay rule sits in `:where()` (zero specificity) so app-level
+ *    `.holdon-overlay` styling — backgrounds in particular — keeps winning;
+ *  - bar spacing uses `margin-left: 2px`, the exact HoldOn.js value, instead
+ *    of flex `gap`: gap STACKS with the host's margin (2px + 3px = 5px bar
+ *    gaps), while a value-identical margin is a no-op regardless of cascade
+ *    order;
+ *  - no `.holdon-content` rule: flex-centering it shifted the spinner inside
+ *    HoldOn.js' absolutely-positioned 50x57 content box; the overlay's own
+ *    flex centering already covers hosts without app-level holdon CSS.
+ */
+
+:where(.holdon-element.holdon-overlay) {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: rgba(255, 255, 255, 0.65);
+}
+
+/* SpinKit "rect" — five bars that stretch in sequence. */
+.sk-rect {
+	width: 50px;
+	height: 40px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-size: 10px;
+}
+
+.sk-rect > div {
+	background-color: #b3b3b3;
+	width: 6px;
+	height: 100%;
+	margin-left: 2px;
+	display: inline-block;
+	animation: holdon-sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.sk-rect .rect2 {
+	animation-delay: -1.1s;
+}
+
+.sk-rect .rect3 {
+	animation-delay: -1s;
+}
+
+.sk-rect .rect4 {
+	animation-delay: -0.9s;
+}
+
+.sk-rect .rect5 {
+	animation-delay: -0.8s;
+}
+
+@keyframes holdon-sk-stretchdelay {
+	0%,
+	40%,
+	100% {
+		transform: scaleY(0.4);
+	}
+
+	20% {
+		transform: scaleY(1);
+	}
+}
+
+/* Screen-reader-only: hide the "Loading..." label visually (Bootstrap 5 has no .sr-only). */
+.holdon-element .sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

package/package.json

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