namirasoft-site-react 1.4.111 → 1.4.113

package/src/components/NSInfoDialog.tsx

@@ -1,37 +1,37 @@
-import { NSDialogProps, NSDialog } from "./NSDialog";
-import { NSSpace, NSSpaceSizeType } from "./NSSpace";
-import { NSTitle } from "./NSTitle";
-
-export interface NSInfoDialogProps extends NSDialogProps
-{
-	title?: string;
-	description?: string | React.ReactNode;
-}
-
-export function NSInfoDialog(props: NSInfoDialogProps)
-{
-	return (
-		<NSDialog center_dialog {...props} style={{right:"unset"}}>
-			{props.title && (
-				<>
-					<NSTitle title={props.title} style={{ marginBottom: "0" }} />
-					<NSSpace size={NSSpaceSizeType.MINI} />
-				</>
-			)}
-			{
-				props.description && (
-					<div className="px-2">
-						<p style={{ marginBottom: "0" }}>{props.description}</p>
-					</div>
-				)
-			}
-			{
-				props.children && (
-					<div>
-						{props.children}
-					</div>
-				)
-			}
-		</NSDialog>
-	);
+import { NSDialogProps, NSDialog } from "./NSDialog";
+import { NSSpace, NSSpaceSizeType } from "./NSSpace";
+import { NSTitle } from "./NSTitle";
+
+export interface NSInfoDialogProps extends NSDialogProps
+{
+	title?: string;
+	description?: string | React.ReactNode;
+}
+
+export function NSInfoDialog(props: NSInfoDialogProps)
+{
+	return (
+		<NSDialog center_dialog {...props} style={{right:"unset"}}>
+			{props.title && (
+				<>
+					<NSTitle title={props.title} style={{ marginBottom: "0" }} />
+					<NSSpace size={NSSpaceSizeType.MINI} />
+				</>
+			)}
+			{
+				props.description && (
+					<div className="px-2">
+						<p style={{ marginBottom: "0" }}>{props.description}</p>
+					</div>
+				)
+			}
+			{
+				props.children && (
+					<div>
+						{props.children}
+					</div>
+				)
+			}
+		</NSDialog>
+	);
 }

package/src/components/NSLayout.module.css

@@ -1,14 +1,14 @@
-.ns_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.ns_layout_main {
-	display: flex;
-	flex-direction: column;
-	color: #fff;
-	background-attachment: fixed;
-	background-repeat: no-repeat;
-	background-size: cover;
+.ns_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.ns_layout_main {
+	display: flex;
+	flex-direction: column;
+	color: #fff;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }

package/src/components/NSLayout.tsx

@@ -1,110 +1,110 @@
-import Styles from './NSLayout.module.css';
-import { Fragment, ReactNode } from 'react';
-import { NSHeader } from './NSHeader';
-import { NSFooter } from './NSFooter';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { NSBarNotification, INSBarNotificationProps } from './NSBarNotification';
-import { IHeaderProps } from '../props/IHeaderProps';
-import { INSBarActionProps, NSBarAction } from './NSBarAction';
-import { INSBarHeroBannerProps, NSBarHeroBanner } from './NSBarHeroBanner';
-import { INSBarTitleProps, NSBarTitle } from './NSBarTitle';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { INSRouterProps } from '../routing/INSRouterProps';
-import { INSBarAlertProps, NSBarAlert } from './NSBarAlert';
-
-export interface INSLayoutProps extends IBaseComponentProps, INSRouterProps
-{
-	scope: string;
-	logo: string;
-	background?: string;
-	header: IHeaderProps;
-	notifications: INSBarNotificationProps[];
-	action?: INSBarActionProps;
-	alerts?: INSBarAlertProps[];
-	banner?: INSBarHeroBannerProps;
-	title?: INSBarTitleProps;
-	children: ReactNode;
-	isLoggedIn: () => boolean;
-}
-export const isNotEmptyString = (string: string | undefined) => string && string.trim() !== "";
-
-export function NSLayout(props: INSLayoutProps)
-{
-	function isValidAction(action?: INSBarActionProps): action is INSBarActionProps
-	{
-		if (action)
-		{
-			if ((isNotEmptyString(action.title)) || (isNotEmptyString(action.description))
-				//todo: check action menus array lenghts
-			)
-				return true;
-		}
-		return false;
-	}
-
-	let alerts = props.alerts ?? [];
-	alerts = alerts.filter((a) => a.isVisible());
-
-	return (
-		<div id={props.id}
-			className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
-			style={{
-				minHeight: "100vh",
-				width: "100%",
-				display: "flex",
-				flexDirection: "column",
-				justifyContent: "center",
-				background: props.background,
-				backgroundSize: "cover",
-				backgroundAttachment: "fixed"
-			}}>
-			<NSHeader
-				scope={props.scope}
-				name="Header"
-				logo={props.logo}
-				header={props.header}
-				isLoggedIn={props.isLoggedIn}
-				notifier={props.notifier}
-			/>
-			{
-				props.notifications.length !== 0 &&
-				<>
-					{
-						props.notifications.map((notification, index) =>
-							<Fragment key={`NSLayout_fragment_key_${index}`}>
-								<NSBarNotification {...notification} />
-							</Fragment>
-						)
-					}
-				</>
-			}
-			{
-				alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
-			}
-			{
-				isValidAction(props.action) && <NSBarAction {...props.action} />
-			}
-			{
-				props.banner && <NSBarHeroBanner {...props.banner} />
-			}
-			<NSSpace size={NSSpaceSizeType.SMALL} />
-			{
-				props.title &&
-				<>
-					<NSBarTitle {...props.title} ></NSBarTitle >
-					<NSSpace size={NSSpaceSizeType.MEDUIM} />
-				</>
-			}
-			<main className={`d-flex flex-column text-white ${Styles.ns_layout_main}`}>
-				{props.children}
-			</main>
-			<NSSpace size={NSSpaceSizeType.MEDUIM} />
-			<NSFooter
-				scope={props.scope}
-				name="Footer"
-				logo={props.logo}
-				isLoggedIn={props.isLoggedIn}
-			/>
-		</div >
-	);
+import Styles from './NSLayout.module.css';
+import { Fragment, ReactNode } from 'react';
+import { NSHeader } from './NSHeader';
+import { NSFooter } from './NSFooter';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { NSBarNotification, INSBarNotificationProps } from './NSBarNotification';
+import { IHeaderProps } from '../props/IHeaderProps';
+import { INSBarActionProps, NSBarAction } from './NSBarAction';
+import { INSBarHeroBannerProps, NSBarHeroBanner } from './NSBarHeroBanner';
+import { INSBarTitleProps, NSBarTitle } from './NSBarTitle';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { INSRouterProps } from '../routing/INSRouterProps';
+import { INSBarAlertProps, NSBarAlert } from './NSBarAlert';
+
+export interface INSLayoutProps extends IBaseComponentProps, INSRouterProps
+{
+	scope: string;
+	logo: string;
+	background?: string;
+	header: IHeaderProps;
+	notifications: INSBarNotificationProps[];
+	action?: INSBarActionProps;
+	alerts?: INSBarAlertProps[];
+	banner?: INSBarHeroBannerProps;
+	title?: INSBarTitleProps;
+	children: ReactNode;
+	isLoggedIn: () => boolean;
+}
+export const isNotEmptyString = (string: string | undefined) => string && string.trim() !== "";
+
+export function NSLayout(props: INSLayoutProps)
+{
+	function isValidAction(action?: INSBarActionProps): action is INSBarActionProps
+	{
+		if (action)
+		{
+			if ((isNotEmptyString(action.title)) || (isNotEmptyString(action.description))
+				//todo: check action menus array lenghts
+			)
+				return true;
+		}
+		return false;
+	}
+
+	let alerts = props.alerts ?? [];
+	alerts = alerts.filter((a) => a.isVisible());
+
+	return (
+		<div id={props.id}
+			className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
+			style={{
+				minHeight: "100vh",
+				width: "100%",
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				background: props.background,
+				backgroundSize: "cover",
+				backgroundAttachment: "fixed"
+			}}>
+			<NSHeader
+				scope={props.scope}
+				name="Header"
+				logo={props.logo}
+				header={props.header}
+				isLoggedIn={props.isLoggedIn}
+				notifier={props.notifier}
+			/>
+			{
+				props.notifications.length !== 0 &&
+				<>
+					{
+						props.notifications.map((notification, index) =>
+							<Fragment key={`NSLayout_fragment_key_${index}`}>
+								<NSBarNotification {...notification} />
+							</Fragment>
+						)
+					}
+				</>
+			}
+			{
+				alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
+			}
+			{
+				isValidAction(props.action) && <NSBarAction {...props.action} />
+			}
+			{
+				props.banner && <NSBarHeroBanner {...props.banner} />
+			}
+			<NSSpace size={NSSpaceSizeType.SMALL} />
+			{
+				props.title &&
+				<>
+					<NSBarTitle {...props.title} ></NSBarTitle >
+					<NSSpace size={NSSpaceSizeType.MEDUIM} />
+				</>
+			}
+			<main className={`d-flex flex-column text-white ${Styles.ns_layout_main}`}>
+				{props.children}
+			</main>
+			<NSSpace size={NSSpaceSizeType.MEDUIM} />
+			<NSFooter
+				scope={props.scope}
+				name="Footer"
+				logo={props.logo}
+				isLoggedIn={props.isLoggedIn}
+			/>
+		</div >
+	);
 }

package/src/components/NSLine.module.css

@@ -1,13 +1,13 @@
-.ns_line_container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin: 0;
-	padding: 0;
-}
-
-.ns_line {
-	width: 80%;
-	height: 2px;
-	background: linear-gradient(90deg, #b0b0b0 0%, hsla(0, 0%, 0%, 1) 50%, #b0b0b0 100%);
+.ns_line_container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+}
+
+.ns_line {
+	width: 80%;
+	height: 2px;
+	background: linear-gradient(90deg, #b0b0b0 0%, hsla(0, 0%, 0%, 1) 50%, #b0b0b0 100%);
 }

package/src/components/NSLine.tsx

@@ -1,16 +1,16 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSLine.module.css';
-
-export interface NSLineProps extends IBaseComponentProps
-{
-
-}
-
-export function NSLine(props: NSLineProps)
-{
-	return (
-		<div style={props.style} className={`${Styles.ns_line_container} `} >
-			<hr className={`${Styles.ns_line} ${props.classList?.join(" ")}`} />
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSLine.module.css';
+
+export interface NSLineProps extends IBaseComponentProps
+{
+
+}
+
+export function NSLine(props: NSLineProps)
+{
+	return (
+		<div style={props.style} className={`${Styles.ns_line_container} `} >
+			<hr className={`${Styles.ns_line} ${props.classList?.join(" ")}`} />
+		</div>
+	);
 }

package/src/components/NSLink.module.css

@@ -1,37 +1,37 @@
-.ns_link_parent {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	gap: 24px;
-}
-
-.ns_link {
-	text-decoration: none;
-	/* box-shadow: inset 2px 2px 2px 0 #1754F3; */
-	box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff;
-	font-size: 16px;
-	font-weight: 600;
-	line-height: 16px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 8px;
-	width: 358px;
-	height: 48px;
-	width: 100%;
-}
-
-.ns_link_absolute {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	cursor: pointer;
-	background-color: transparent !important;
+.ns_link_parent {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 24px;
+}
+
+.ns_link {
+	text-decoration: none;
+	/* box-shadow: inset 2px 2px 2px 0 #1754F3; */
+	box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 16px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 8px;
+	width: 358px;
+	height: 48px;
+	width: 100%;
+}
+
+.ns_link_absolute {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	cursor: pointer;
+	background-color: transparent !important;
 }

package/src/components/NSLink.tsx

@@ -1,26 +1,26 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from "../props/ILinkProps";
-import Styles from "./NSLink.module.css";
-
-export interface INSILinkProps extends ILinkProps, IBaseComponentProps
-{
-}
-
-export function NSLink(props: INSILinkProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_link_parent} ${props.classList?.join(" ")}`}
-		>
-			<a
-				className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`}
-				href={props.href}
-				target={props?.target ?? "_self"}
-				style={props.style}
-			>
-				{props.title}
-			</a>
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from "../props/ILinkProps";
+import Styles from "./NSLink.module.css";
+
+export interface INSILinkProps extends ILinkProps, IBaseComponentProps
+{
+}
+
+export function NSLink(props: INSILinkProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_link_parent} ${props.classList?.join(" ")}`}
+		>
+			<a
+				className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`}
+				href={props.href}
+				target={props?.target ?? "_self"}
+				style={props.style}
+			>
+				{props.title}
+			</a>
+		</div>
+	);
 }

package/src/components/NSLinkBlue.tsx

@@ -1,21 +1,21 @@
-import { NSLink, INSILinkProps } from "./NSLink";
-
-export function NSLinkBlue(props: INSILinkProps)
-{
-	return (
-		<NSLink
-			id={props.id}
-			style=
-			{{
-				color: "#fff",
-				border: "none",
-				backgroundColor: "rgba(3, 119, 255, 1)",
-				width: "272px",
-				height: "48px",
-				boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
-			}}
-			title={props.title}
-			href={props.href}
-			target={props.target}
-		/>);
+import { NSLink, INSILinkProps } from "./NSLink";
+
+export function NSLinkBlue(props: INSILinkProps)
+{
+	return (
+		<NSLink
+			id={props.id}
+			style=
+			{{
+				color: "#fff",
+				border: "none",
+				backgroundColor: "rgba(3, 119, 255, 1)",
+				width: "272px",
+				height: "48px",
+				boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
+			}}
+			title={props.title}
+			href={props.href}
+			target={props.target}
+		/>);
 }

package/src/components/NSLinkGreen.tsx

@@ -1,6 +1,6 @@
-import { NSLink, INSILinkProps } from "./NSLink";
-
-export function NSLinkGreen(props: INSILinkProps)
-{
-    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "#06D182" }} title={props.title} href={props.href} target={props.target} />;
+import { NSLink, INSILinkProps } from "./NSLink";
+
+export function NSLinkGreen(props: INSILinkProps)
+{
+    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "#06D182" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSLinkRed.tsx

@@ -1,6 +1,6 @@
-import { NSLink, INSILinkProps } from "./NSLink";
-
-export function NSLinkRed(props: INSILinkProps)
-{
-    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "rgb(265, 63, 63, 1)" }} title={props.title} href={props.href} target={props.target} />;
+import { NSLink, INSILinkProps } from "./NSLink";
+
+export function NSLinkRed(props: INSILinkProps)
+{
+    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "rgb(265, 63, 63, 1)" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSLoading.module.css

@@ -1,31 +1,31 @@
-.ns_loading_parent {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 0 auto;
-	padding: 48px 0;
-	color: rgba(20, 27, 92, 1);
-	gap: 16px;
-}
-
-.ns_loader {
-	margin: 16px 0;
-	width: 75px;
-	height: 75px;
-	border-radius: 50%;
-	padding: 1px;
-	background: conic-gradient(#0000 10%, #001664) content-box;
-	-webkit-mask:
-		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
-		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
-	-webkit-mask-composite: destination-in;
-	animation: s4 1s infinite steps(10);
-}
-
-@keyframes s4 {
-	to {
-		transform: rotate(1turn)
-	}
+.ns_loading_parent {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+	padding: 48px 0;
+	color: rgba(20, 27, 92, 1);
+	gap: 16px;
+}
+
+.ns_loader {
+	margin: 16px 0;
+	width: 75px;
+	height: 75px;
+	border-radius: 50%;
+	padding: 1px;
+	background: conic-gradient(#0000 10%, #001664) content-box;
+	-webkit-mask:
+		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
+		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+	-webkit-mask-composite: destination-in;
+	animation: s4 1s infinite steps(10);
+}
+
+@keyframes s4 {
+	to {
+		transform: rotate(1turn)
+	}
 }