inviton-powerduck 0.0.208 → 0.0.210

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/components/ui/notification.ts

@@ -11,7 +11,6 @@ export enum NotificationType {
 	Success = 'success',
 	Warning = 'warning',
 	Danger = 'danger',
-	Error = 'danger',
 }
 
 export enum NotificationIcon {
@@ -119,14 +118,30 @@ interface NotificationDisplayArgs {
 		 */
 		containerClass?: string;
 	};
+
+	/**
+	 * Optional custom template passed directly to bootstrap-notify.
+	 * When not provided, a default template is used.
+	 */
+	template?: string | ((containerClass: string) => string);
+
 }
 
-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 +152,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 +169,91 @@ const NotificationUtils = (function () {
 			align = 'right';
 		}
 
+		if (isMobileViewport() && (from === 'bottom' || from === 'top')) {
+			align = 'center';
+		}
+
 		return {
 			from,
 			align,
 		};
-	}
+	};
+
+	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 resolveTemplate = (args: NotificationDisplayArgs, containerClass: string): string => {
+		if (typeof args.template === 'string') {
+			return args.template;
+		}
+
+		if (typeof args.template === 'function') {
+			return args.template(containerClass);
+		}
 
-	function show(
+		return buildTemplate(containerClass);
+	};
+
+	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;
+
+		const template = resolveTemplate(args, containerClass);
+
 		(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,
+			onShow: onShowHandler,
 		});
-	}
+	};
 
 	return {
 		show,
@@ -236,24 +301,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 +335,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 +346,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.208",
+	"version": "0.0.210",
 	"files": [
 		"app/",
 		"common/",