namirasoft-site-react 1.5.13 → 1.5.15

package/src/components/NSLayout.tsx

@@ -1,144 +1,144 @@
-import { FilterLinkFullRow } from 'namirasoft-api-link';
-import { Fragment, ReactNode } from 'react';
-import { IBackgroundProps } from '../props/IBackgroundProps';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { IHeaderRightProps } from '../props/IHeaderRightProps';
-import { NSRouterMakerResult } from '../routing/NSRouterMaker';
-import { NSBarAction, NSBarActionProps, isValidAction } from './NSBarAction';
-import { NSBarAlert, NSBarAlertProps } from './NSBarAlert';
-import { NSBarNotification, NSBarNotificationProps } from './NSBarNotification';
-import { NSBarTitle, NSBarTitleProps } from './NSBarTitle';
-import { NSFooter } from './NSFooter';
-import { NSHeader } from './NSHeader';
-import Styles from './NSLayout.module.css';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-
-export interface NSLayoutProps extends IBaseComponentProps, NSRouterMakerResult
-{
-    scope: string;
-    logo: string;
-    header: {
-        enabled?: boolean;
-        right: IHeaderRightProps;
-        left?: { title?: string }
-        mega_menu?: boolean;
-        onCollapse?: () => void;
-        filters_postprocessor?: (filters: FilterLinkFullRow[]) => FilterLinkFullRow[];
-    };
-    background?: IBackgroundProps;
-    notifications: NSBarNotificationProps[];
-    action?: NSBarActionProps;
-    alerts?: NSBarAlertProps[];
-    title?: NSBarTitleProps;
-    children: ReactNode;
-    isLoggedIn: () => boolean;
-    onEnterPressed?: () => void;
-}
-
-export function NSLayout(props: NSLayoutProps)
-{
-    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?.image ? `url(${props.background?.image})` : "",
-                backgroundSize: props.background?.size ?? "cover",
-                backgroundAttachment: props.background?.attachment ?? "fixed"
-            }}
-            onKeyUp={e =>
-            {
-                if (e.key === "Enter")
-                    props.onEnterPressed?.();
-            }}
-        >
-            {
-                props.header.enabled !== false &&
-                <NSHeader
-                    left={{
-                        scope: props.scope,
-                        name: "Header",
-                        logo: props.logo,
-                        title: props.header.left?.title
-                    }}
-                    right={props.header.right}
-                    isLoggedIn={props.isLoggedIn}
-                    notifier={props.notifier}
-                    mega_menu={props.header.mega_menu}
-                    onCollapse={props.header.onCollapse}
-                    filters_postprocessor={props.header.filters_postprocessor}
-                >
-                    {
-                        props.notifications.length !== 0 &&
-                        <>
-                            {
-                                props.notifications.map((notification, index) =>
-                                    <Fragment key={`NSLayout_fragment_key_${index}`}>
-                                        <NSBarNotification
-                                            {...notification}
-                                            onClose={() =>
-                                            {
-                                                props.notifier.delNotification(notification.id);
-                                            }}
-                                            onChangeState={() =>
-                                            {
-                                                props.notifier.onChangeState();
-                                            }}
-                                        />
-                                    </Fragment>
-                                )
-                            }
-                        </>
-                    }
-                    {/* Desktop */}
-                    <div className='d-none d-lg-block'>
-                        {
-                            alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
-                        }
-                        {
-                            isValidAction(props.action) &&
-                            <NSBarAction
-                                {...props.action}
-                            />
-                        }
-                    </div>
-                    {/* Desktop */}
-                </NSHeader>
-            }
-            <div className='d-block d-lg-none'>
-                {/* Mobile */}
-                {
-                    alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
-                }
-                {
-                    isValidAction(props.action) && <NSBarAction {...props.action} />
-                }
-            </div>
-            {/* Mobile */}
-            {
-                props.title &&
-                <>
-                    <NSSpace size={NSSpaceSizeType.MINI}
-                    ></NSSpace>
-                    <NSBarTitle {...props.title} ></NSBarTitle >
-                </>
-            }
-            <main className={`d-flex flex-column ${Styles.ns_layout_main}`}>
-                {props.children}
-            </main>
-            <NSFooter
-                scope={props.scope}
-                name="Footer"
-                logo={props.logo}
-                isLoggedIn={props.isLoggedIn}
-            />
-        </div >
-    );
+import { FilterLinkFullRow } from 'namirasoft-api-link';
+import { Fragment, ReactNode } from 'react';
+import { IBackgroundProps } from '../props/IBackgroundProps';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { IHeaderRightProps } from '../props/IHeaderRightProps';
+import { NSRouterMakerResult } from '../routing/NSRouterMaker';
+import { NSBarAction, NSBarActionProps, isValidAction } from './NSBarAction';
+import { NSBarAlert, NSBarAlertProps } from './NSBarAlert';
+import { NSBarNotification, NSBarNotificationProps } from './NSBarNotification';
+import { NSBarTitle, NSBarTitleProps } from './NSBarTitle';
+import { NSFooter } from './NSFooter';
+import { NSHeader } from './NSHeader';
+import Styles from './NSLayout.module.css';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+
+export interface NSLayoutProps extends IBaseComponentProps, NSRouterMakerResult
+{
+    scope: string;
+    logo: string;
+    header: {
+        enabled?: boolean;
+        right: IHeaderRightProps;
+        left?: { title?: string }
+        mega_menu?: boolean;
+        onCollapse?: () => void;
+        filters_postprocessor?: (filters: FilterLinkFullRow[]) => FilterLinkFullRow[];
+    };
+    background?: IBackgroundProps;
+    notifications: NSBarNotificationProps[];
+    action?: NSBarActionProps;
+    alerts?: NSBarAlertProps[];
+    title?: NSBarTitleProps;
+    children: ReactNode;
+    isLoggedIn: () => boolean;
+    onEnterPressed?: () => void;
+}
+
+export function NSLayout(props: NSLayoutProps)
+{
+    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?.image ? `url(${props.background?.image})` : "",
+                backgroundSize: props.background?.size ?? "cover",
+                backgroundAttachment: props.background?.attachment ?? "fixed"
+            }}
+            onKeyUp={e =>
+            {
+                if (e.key === "Enter")
+                    props.onEnterPressed?.();
+            }}
+        >
+            {
+                props.header.enabled !== false &&
+                <NSHeader
+                    left={{
+                        scope: props.scope,
+                        name: "Header",
+                        logo: props.logo,
+                        title: props.header.left?.title
+                    }}
+                    right={props.header.right}
+                    isLoggedIn={props.isLoggedIn}
+                    notifier={props.notifier}
+                    mega_menu={props.header.mega_menu}
+                    onCollapse={props.header.onCollapse}
+                    filters_postprocessor={props.header.filters_postprocessor}
+                >
+                    {
+                        props.notifications.length !== 0 &&
+                        <>
+                            {
+                                props.notifications.map((notification, index) =>
+                                    <Fragment key={`NSLayout_fragment_key_${index}`}>
+                                        <NSBarNotification
+                                            {...notification}
+                                            onClose={() =>
+                                            {
+                                                props.notifier.delNotification(notification.id);
+                                            }}
+                                            onChangeState={() =>
+                                            {
+                                                props.notifier.onChangeState();
+                                            }}
+                                        />
+                                    </Fragment>
+                                )
+                            }
+                        </>
+                    }
+                    {/* Desktop */}
+                    <div className='d-none d-lg-block'>
+                        {
+                            alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
+                        }
+                        {
+                            isValidAction(props.action) &&
+                            <NSBarAction
+                                {...props.action}
+                            />
+                        }
+                    </div>
+                    {/* Desktop */}
+                </NSHeader>
+            }
+            <div className='d-block d-lg-none'>
+                {/* Mobile */}
+                {
+                    alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
+                }
+                {
+                    isValidAction(props.action) && <NSBarAction {...props.action} />
+                }
+            </div>
+            {/* Mobile */}
+            {
+                props.title &&
+                <>
+                    <NSSpace size={NSSpaceSizeType.MINI}
+                    ></NSSpace>
+                    <NSBarTitle {...props.title} ></NSBarTitle >
+                </>
+            }
+            <main className={`d-flex flex-column ${Styles.ns_layout_main}`}>
+                {props.children}
+            </main>
+            <NSFooter
+                scope={props.scope}
+                name="Footer"
+                logo={props.logo}
+                isLoggedIn={props.isLoggedIn}
+            />
+        </div >
+    );
 }

package/src/components/NSLine.module.css

@@ -1,16 +1,16 @@
-.ns_line_container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin: 0;
-	padding: 0;
-	width: 100%;
-}
-
-.ns_line {
-	width: 80%;
-	margin: 0;
-	padding: 0;
-	height: 3px;
-	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;
+	width: 100%;
+}
+
+.ns_line {
+	width: 80%;
+	margin: 0;
+	padding: 0;
+	height: 3px;
+	background: linear-gradient(90deg, #b0b0b0 0%, hsla(0, 0%, 0%, 1) 50%, #b0b0b0 100%);
 }

package/src/components/NSLine.tsx

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

package/src/components/NSLineText.module.css

@@ -1,39 +1,39 @@
-.ns_line_text_container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin: 0;
-	padding: 0;
-	width: 100%;
-}
-
-.ns_line_text {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	width: 80%;
-}
-
-.ns_line_text::before,
-.ns_line_text::after {
-	content: '';
-	flex: 1;
-	position: relative;
-	height: 2px;
-}
-
-.ns_line_text::before {
-	background: linear-gradient(to left, hsla(0, 0%, 0%, .25), #b0b0b03f);
-	margin-right: 1em;
-}
-
-.ns_line_text::after {
-	background: linear-gradient(to right, hsla(0, 0%, 0%, .25), #b0b0b03f);
-	margin-left: 1em;
-}
-
-.ns_line_text>span {
-	color: rgba(20, 27, 92, 1);
-	font-weight: bold;
+.ns_line_text_container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+}
+
+.ns_line_text {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	width: 80%;
+}
+
+.ns_line_text::before,
+.ns_line_text::after {
+	content: '';
+	flex: 1;
+	position: relative;
+	height: 2px;
+}
+
+.ns_line_text::before {
+	background: linear-gradient(to left, hsla(0, 0%, 0%, .25), #b0b0b03f);
+	margin-right: 1em;
+}
+
+.ns_line_text::after {
+	background: linear-gradient(to right, hsla(0, 0%, 0%, .25), #b0b0b03f);
+	margin-left: 1em;
+}
+
+.ns_line_text>span {
+	color: rgba(20, 27, 92, 1);
+	font-weight: bold;
 }

package/src/components/NSLineText.tsx

@@ -1,18 +1,18 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSLineText.module.css';
-
-export interface NSLineTextProps extends IBaseComponentProps
-{
-	title: string;
-}
-
-export function NSLineText(props: NSLineTextProps)
-{
-	return (
-		<div id={props.id} style={props.style} className={`${Styles.ns_line_text_container} `} >
-			<div className={`${Styles.ns_line_text} `} >
-				<span>{props.title}</span>
-			</div>
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSLineText.module.css';
+
+export interface NSLineTextProps extends IBaseComponentProps
+{
+	title: string;
+}
+
+export function NSLineText(props: NSLineTextProps)
+{
+	return (
+		<div id={props.id} style={props.style} className={`${Styles.ns_line_text_container} `} >
+			<div className={`${Styles.ns_line_text} `} >
+				<span>{props.title}</span>
+			</div>
+		</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,27 +1,27 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from "../props/ILinkProps";
-import Styles from "./NSLink.module.css";
-
-export interface NSLinkProps extends ILinkProps, IBaseComponentProps
-{
-	children?: React.ReactNode;
-}
-
-export function NSLink(props: NSLinkProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_link_parent} ${props.classList?.join(" ") ?? ""}`}
-		>
-			<a
-				className={`text-white text-decoration-none ${props.children ? Styles.ns_link : Styles.ns_link_absolute}`}
-				href={props.href}
-				target={props?.target ?? "_self"}
-				style={props.style}
-			>
-				{props.children}
-			</a>
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from "../props/ILinkProps";
+import Styles from "./NSLink.module.css";
+
+export interface NSLinkProps extends ILinkProps, IBaseComponentProps
+{
+	children?: React.ReactNode;
+}
+
+export function NSLink(props: NSLinkProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_link_parent} ${props.classList?.join(" ") ?? ""}`}
+		>
+			<a
+				className={`text-white text-decoration-none ${props.children ? Styles.ns_link : Styles.ns_link_absolute}`}
+				href={props.href}
+				target={props?.target ?? "_self"}
+				style={props.style}
+			>
+				{props.children}
+			</a>
+		</div>
+	);
 }

package/src/components/NSLinkBlue.tsx

@@ -1,23 +1,23 @@
-import { NSBox } from "./NSBox";
-import { NSLink, NSLinkProps } from "./NSLink";
-
-export function NSLinkBlue(props: NSLinkProps)
-{
-	return (
-		<NSLink
-			id={props.id}
-			style=
-			{{
-				color: "#fff",
-				border: "none",
-				backgroundColor: "rgba(3, 119, 255, 1)",
-				width: NSBox.width.one,
-				height: NSBox.height.box,
-				boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
-			}}
-			href={props.href}
-			target={props.target ?? "_self"}
-		>
-			{props.children}
-		</NSLink>);
+import { NSBox } from "./NSBox";
+import { NSLink, NSLinkProps } from "./NSLink";
+
+export function NSLinkBlue(props: NSLinkProps)
+{
+	return (
+		<NSLink
+			id={props.id}
+			style=
+			{{
+				color: "#fff",
+				border: "none",
+				backgroundColor: "rgba(3, 119, 255, 1)",
+				width: NSBox.width.one,
+				height: NSBox.height.box,
+				boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
+			}}
+			href={props.href}
+			target={props.target ?? "_self"}
+		>
+			{props.children}
+		</NSLink>);
 }

package/src/components/NSLinkGreen.tsx

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