inviton-powerduck 0.0.207 → 0.0.209

package/components/datatable/datatable.tsx

@@ -1812,7 +1812,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 	}
 
 	getMobileBehavior(): DataTableMobileBehavior {
-		return this.currentMobileBehavior ?? DataTableConfig.defaultMobileBehavior;
+		return this.currentMobileBehavior ?? (DataTableConfig.defaultMobileBehavior as DataTableMobileBehavior);
 	}
 
 	getVisibleColumns(): TableColumn[] {

package/components/ui/notification.ts

@@ -121,12 +121,21 @@ interface NotificationDisplayArgs {
 	};
 }
 
-const NotificationUtils = (function () {
-	function getArgs(
+const isMobileViewport = (): boolean => typeof window !== 'undefined' && window.innerWidth < 768;
+
+const applyMobileCenterOffset = (element: any, offsetX: number): void => {
+	element?.css({
+		left: `${offsetX}px`,
+		right: `${offsetX}px`,
+	});
+};
+
+const NotificationUtils = (() => {
+	const getArgs = (
 		messageOrArgs: string | NotificationDisplayArgs,
 		icon?: string,
 		title?: string,
-	): NotificationDisplayArgs {
+	): NotificationDisplayArgs => {
 		const args = messageOrArgs as NotificationDisplayArgs;
 		if (args.messageHtml != null) {
 			return args;
@@ -137,13 +146,13 @@ const NotificationUtils = (function () {
 			icon,
 			title,
 		};
-	}
+	};
 
-	function getPlacement(args: NotificationDisplayArgs): any {
-		const placement = args.placement || NotificationPlacement.TopCenter;
+	const getPlacement = (args: NotificationDisplayArgs): any => {
+		const placement = typeof args.placement === 'number' ? args.placement : NotificationPlacement.TopCenter;
 		const placementEnd = (<number>placement).toString();
 		const lastNumber = Number(placementEnd.substring(placementEnd.length - 1));
-		const from = placement < 10 ? 'top' : 'bottom';
+		const from = placement >= NotificationPlacement.BottomLeft ? 'bottom' : 'top';
 		let align;
 
 		if (lastNumber == 0) {
@@ -154,41 +163,77 @@ const NotificationUtils = (function () {
 			align = 'right';
 		}
 
+		if (isMobileViewport() && (from === 'bottom' || from === 'top')) {
+			align = 'center';
+		}
+
 		return {
 			from,
 			align,
 		};
-	}
+	};
 
-	function show(
+	const buildTemplate = (containerClass: string): string => `<div data-notify="container" class="${containerClass} alert alert-{0}" role="alert" style="z-index:999999">
+	<button type="button" class="btn-close" data-notify="dismiss" aria-label="Close"></button>
+	<span data-notify="icon"></span>
+	<span data-notify="title">{1}</span>
+	<span data-notify="message">{2}</span>
+	<div class="progress" data-notify="progressbar">
+		<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;"></div>
+	</div>
+	<a href="{3}" target="{4}" data-notify="url"></a>
+</div>`.replace(/\s{2,}/g, ' ').trim();
+
+	const show = (
 		messageOrArgs: string | NotificationDisplayArgs,
 		icon?: string,
 		title?: string,
-	): void {
+	): void => {
 		const args = getArgs(
 			messageOrArgs,
 			icon,
 			title,
 		);
 
+		const containerClass = args.cssClasses?.containerClass || 'col-xs-11 col-sm-4';
+		const timerValue = typeof args.timeout === 'number' ? args.timeout : NotificationProviderConfig.defaultTimeout;
+		const delayValue = typeof args.delay === 'number' ? args.delay : NotificationProviderConfig.defaultDelay;
+		const placementOptions = getPlacement(args);
+		const defaultEnterAnimation = placementOptions.from === 'bottom' ? NotificationAnimation.FadeInUp : NotificationAnimation.FadeInDown;
+		const defaultExitAnimation = placementOptions.from === 'bottom' ? NotificationAnimation.FadeOutDown : NotificationAnimation.FadeOutUp;
+		const offsetOptions = {
+			x: 20,
+			y: 20,
+		};
+
+		const shouldForceMobileCenter = isMobileViewport() && placementOptions.align === 'center';
+		const onShowHandler = shouldForceMobileCenter
+			? function (this: any) {
+				applyMobileCenterOffset(this, offsetOptions.x);
+			}
+			: undefined;
+
 		(jQuery as any).notify({
 			icon: args.icon,
 			message: args.messageHtml,
 			title: args.title,
 		}, {
-			type: args.type || 'primary',
-			timer: args.timeout > -1 ? args.timeout : NotificationProviderConfig.defaultTimeout,
-			delay: args.delay > -1 ? args.delay : NotificationProviderConfig.defaultDelay,
-			placement: getPlacement(args),
+			type: args.type || NotificationType.Primary,
+			timer: timerValue,
+			delay: delayValue,
+			placement: placementOptions,
 			z_index: 99999,
-			newest_on_top: (args.newestTop || false),
+			newest_on_top: args.newestTop ?? false,
+			icon_type: 'class',
 			animate: {
-				enter: (args.animation?.enter || 'animate__animated animate__fadeInDown'),
-				exit: (args.animation?.exit || 'animate__animated animate__fadeOutUp'),
+				enter: args.animation?.enter || defaultEnterAnimation,
+				exit: args.animation?.exit || defaultExitAnimation,
 			},
-			template: `<div data-notify="container" class="${args.cssClasses?.containerClass ? args.cssClasses.containerClass : 'col-xs-11 col-sm-4'} alert alert-{0}" role="alert" style="z-index:999999"><div type="button" aria-hidden="true" class="btn-close close" data-notify="dismiss"></div><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>`,
+			offset: offsetOptions,
+			template: buildTemplate(containerClass),
+			onShow: onShowHandler,
 		});
-	}
+	};
 
 	return {
 		show,
@@ -236,24 +281,33 @@ export default class NotificationProvider {
 	}
 
 	/**
-	 * Displays error message
+	 * Displays danger\error message
 	 *
-	 * @param message Error message
+	 * @param message Danger\Error message
 	 */
-	static showErrorMessage(message: string): void;
+	static showErrorMessage(message: string, placement?: NotificationPlacement): void;
+	static showErrorMessage(message: string, title?: string, placement?: NotificationPlacement): void;
 
 	/**
-	 * Displays error message
+	 * Displays danger\error message
 	 *
-	 * @param messageHtml Error message
+	 * @param messageHtml Danger\Error message
 	 * @param title Title of the message
 	 */
-	static showErrorMessage(messageHtml: string, title?: string): void {
+	static showErrorMessage(
+		messageHtml: string,
+		titleOrPlacement?: string | NotificationPlacement,
+		placement?: NotificationPlacement,
+	): void {
+		const resolvedTitle = typeof titleOrPlacement === 'string' ? titleOrPlacement : undefined;
+		const resolvedPlacement = typeof titleOrPlacement === 'number' ? titleOrPlacement : placement;
+
 		NotificationUtils.show({
 			messageHtml,
-			title,
+			title: resolvedTitle,
 			icon: NotificationIcon.Exclamation,
-			type: NotificationType.Error,
+			type: NotificationType.Danger,
+			placement: resolvedPlacement ?? NotificationPlacement.TopCenter,
 		});
 	}
 
@@ -261,8 +315,10 @@ export default class NotificationProvider {
 	 * Displays success message
 	 *
 	 * @param message Success message
+	//
 	 */
-	static showSuccessMessage(message: string): void;
+	static showSuccessMessage(message: string, placement?: NotificationPlacement): void;
+	static showSuccessMessage(message: string, title?: string, placement?: NotificationPlacement): void;
 
 	/**
 	 * Displays success message
@@ -270,12 +326,45 @@ export default class NotificationProvider {
 	 * @param messageHtml Success message
 	 * @param title Title of the message
 	 */
-	static showSuccessMessage(messageHtml: string, title?: string): void {
+	static showSuccessMessage(
+		messageHtml: string,
+		titleOrPlacement?: string | NotificationPlacement,
+		placement?: NotificationPlacement,
+	): void {
+		const resolvedTitle = typeof titleOrPlacement === 'string' ? titleOrPlacement : undefined;
+		const resolvedPlacement = typeof titleOrPlacement === 'number' ? titleOrPlacement : placement;
+
 		NotificationUtils.show({
 			messageHtml,
-			title,
+			title: resolvedTitle,
 			icon: NotificationIcon.Checkmark,
 			type: NotificationType.Success,
+			placement: resolvedPlacement ?? NotificationPlacement.TopCenter,
+		});
+	}
+
+	/**
+	 * Displays warning message
+	 *
+	 * @param messageHtml Success message
+	 * @param title Title of the message
+	 */
+	static showWarningMessage(message: string, placement?: NotificationPlacement): void;
+	static showWarningMessage(message: string, title?: string, placement?: NotificationPlacement): void;
+	static showWarningMessage(
+		messageHtml: string,
+		titleOrPlacement?: string | NotificationPlacement,
+		placement?: NotificationPlacement,
+	): void {
+		const resolvedTitle = typeof titleOrPlacement === 'string' ? titleOrPlacement : undefined;
+		const resolvedPlacement = typeof titleOrPlacement === 'number' ? titleOrPlacement : placement;
+
+		NotificationUtils.show({
+			messageHtml,
+			title: resolvedTitle,
+			icon: NotificationIcon.Exclamation,
+			type: NotificationType.Warning,
+			placement: resolvedPlacement ?? NotificationPlacement.TopRight,
 		});
 	}
 }

package/package.json

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