namirasoft-site-react 1.4.259 → 1.4.261

package/src/components/NSLabel.module.css

@@ -1,26 +1,26 @@
-.ns_label_title {
-    color: hsla(234, 64%, 22%, 1);
-    margin-bottom: 8px;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 0px;
-    margin: 0px;
-    align-content: center;
-}
-
-.ns_label_desciption {
-    color: hsla(234, 64%, 22%, 1);
-    font-size: 16px;
-    padding: 0px;
-    margin: 0px;
-}
-
-.ns_label_item {
-    padding: 8px;
-    border-right: none !important;
-    align-content: center;
-}
-
-.ns_label_item:not(:last-child) {
-    border-right: 1px solid #ccc;
+.ns_label_title {
+    color: hsla(234, 64%, 22%, 1);
+    margin-bottom: 8px;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px;
+    margin: 0px;
+    align-content: center;
+}
+
+.ns_label_desciption {
+    color: hsla(234, 64%, 22%, 1);
+    font-size: 16px;
+    padding: 0px;
+    margin: 0px;
+}
+
+.ns_label_item {
+    padding: 8px;
+    border-right: none !important;
+    align-content: center;
+}
+
+.ns_label_item:not(:last-child) {
+    border-right: 1px solid #ccc;
 }

package/src/components/NSLabel.tsx

@@ -1,47 +1,47 @@
-"use client";
-
-import Styles from './NSLabel.module.css'
-import React from "react";
-import { ReactNode } from "react";
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-
-export interface NSLabelProps extends IBaseComponentProps
-{
-    title: string;
-    desciption?: string;
-    children?: ReactNode;
-}
-
-export interface NSLabelState
-{ }
-
-export class NSLabel extends React.Component<NSLabelProps, NSLabelState>
-{
-    override render()
-    {
-        return (
-            <div id={this.props.id} className={`${Styles.ns_label_item} ${this.props.classList?.join(" ") ?? ""}`} style={this.props.style}>
-                <span className={`${Styles.ns_label_title} ns_font_16_bold`}>
-                    {this.props.title}
-                </span>
-                {
-                    this.props.desciption &&
-                    <div>
-                        <span className={`${Styles.ns_label_desciption}`}>
-                            {this.props.desciption}
-                        </span>
-                    </div>
-                }
-                {
-
-                    this.props.children &&
-                    <>
-                        <div>
-                            {this.props.children}
-                        </div>
-                    </>
-                }
-            </div >
-        );
-    }
+"use client";
+
+import Styles from './NSLabel.module.css'
+import React from "react";
+import { ReactNode } from "react";
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+
+export interface NSLabelProps extends IBaseComponentProps
+{
+    title: string;
+    desciption?: string;
+    children?: ReactNode;
+}
+
+export interface NSLabelState
+{ }
+
+export class NSLabel extends React.Component<NSLabelProps, NSLabelState>
+{
+    override render()
+    {
+        return (
+            <div id={this.props.id} className={`${Styles.ns_label_item} ${this.props.classList?.join(" ") ?? ""}`} style={this.props.style}>
+                <span className={`${Styles.ns_label_title} ns_font_16_bold`}>
+                    {this.props.title}
+                </span>
+                {
+                    this.props.desciption &&
+                    <div>
+                        <span className={`${Styles.ns_label_desciption}`}>
+                            {this.props.desciption}
+                        </span>
+                    </div>
+                }
+                {
+
+                    this.props.children &&
+                    <>
+                        <div>
+                            {this.props.children}
+                        </div>
+                    </>
+                }
+            </div >
+        );
+    }
 }

package/src/components/NSLabelErrorNotifier.module.css

@@ -1,3 +1,3 @@
-.ns_label_error_notifier_text {
-    color: #FF3F3F !important;
+.ns_label_error_notifier_text {
+    color: #FF3F3F !important;
 }

package/src/components/NSLabelErrorNotifier.tsx

@@ -1,36 +1,36 @@
-import Styles from "./NSLabelErrorNotifier.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { useRef } from "react";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSLabelErrorNotifierProps extends IBaseComponentProps
-{
-	error?: string;
-	clearError: () => void;
-}
-
-export function NSLabelErrorNotifier(props: NSLabelErrorNotifierProps)
-{
-	let service = useRef<SetTimeouService>(new SetTimeouService());
-	if (props.error)
-		service.current.setTimeoutIfNotCalledAgain(() =>
-		{
-			props.clearError();
-		}, 5000);
-	return <>
-		{
-			props.error && (
-				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
-					<img
-						className={""}
-						src="https://static.namirasoft.com/image/concept/danger/red.svg"
-						alt="Error Icon"
-						width={13}
-						height={13}
-					/>
-					<span className={Styles.ns_label_error_notifier_text}>{props.error}</span>
-				</div >
-			)
-		}
-	</>;
+import Styles from "./NSLabelErrorNotifier.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { useRef } from "react";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSLabelErrorNotifierProps extends IBaseComponentProps
+{
+	error?: string;
+	clearError: () => void;
+}
+
+export function NSLabelErrorNotifier(props: NSLabelErrorNotifierProps)
+{
+	let service = useRef<SetTimeouService>(new SetTimeouService());
+	if (props.error)
+		service.current.setTimeoutIfNotCalledAgain(() =>
+		{
+			props.clearError();
+		}, 5000);
+	return <>
+		{
+			props.error && (
+				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
+					<img
+						className={""}
+						src="https://static.namirasoft.com/image/concept/danger/red.svg"
+						alt="Error Icon"
+						width={13}
+						height={13}
+					/>
+					<span className={Styles.ns_label_error_notifier_text}>{props.error}</span>
+				</div >
+			)
+		}
+	</>;
 }

package/src/components/NSLayout.module.css

@@ -1,15 +1,15 @@
-.ns_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.ns_layout_main {
-	padding: 24px;
-	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 {
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	color: #fff;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }

package/src/components/NSLayout.tsx

@@ -1,131 +1,131 @@
-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, NSBarNotificationProps } from './NSBarNotification';
-import { IHeaderProps } from '../props/IHeaderProps';
-import { NSBarActionProps, NSBarAction, isValidAction } from './NSBarAction';
-import { NSBarTitleProps, NSBarTitle } from './NSBarTitle';
-import { INSRouterProps } from '../routing/INSRouterProps';
-import { NSBarAlertProps, NSBarAlert } from './NSBarAlert';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBackgroundPropps } from '../props/IBackgroundPropps';
-
-export interface NSLayoutProps extends IBaseComponentProps, INSRouterProps
-{
-	scope: string;
-	logo: string;
-	background?: IBackgroundPropps;
-	header: IHeaderProps;
-	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());
-
-	// useEffect(() =>
-	// {
-	// 	const handleKeyDown = (event: KeyboardEvent) =>
-	// 	{
-	// 		if (event.key === "Enter")
-	// 			props.onEnterPressed?.();
-	// 	};
-	// 	window.addEventListener("keyup", handleKeyDown);
-	// 	return () =>
-	// 	{
-	// 		window.removeEventListener("keyup", handleKeyDown);
-	// 	};
-	// }, []);
-
-	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?.();
-			}}
-		>
-			<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>
-							)
-						}
-					</>
-				}
-				{/* 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 text-white ${Styles.ns_layout_main}`}>
-				{props.children}
-			</main>
-			<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, NSBarNotificationProps } from './NSBarNotification';
+import { IHeaderProps } from '../props/IHeaderProps';
+import { NSBarActionProps, NSBarAction, isValidAction } from './NSBarAction';
+import { NSBarTitleProps, NSBarTitle } from './NSBarTitle';
+import { INSRouterProps } from '../routing/INSRouterProps';
+import { NSBarAlertProps, NSBarAlert } from './NSBarAlert';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBackgroundPropps } from '../props/IBackgroundPropps';
+
+export interface NSLayoutProps extends IBaseComponentProps, INSRouterProps
+{
+	scope: string;
+	logo: string;
+	background?: IBackgroundPropps;
+	header: IHeaderProps;
+	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());
+
+	// useEffect(() =>
+	// {
+	// 	const handleKeyDown = (event: KeyboardEvent) =>
+	// 	{
+	// 		if (event.key === "Enter")
+	// 			props.onEnterPressed?.();
+	// 	};
+	// 	window.addEventListener("keyup", handleKeyDown);
+	// 	return () =>
+	// 	{
+	// 		window.removeEventListener("keyup", handleKeyDown);
+	// 	};
+	// }, []);
+
+	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?.();
+			}}
+		>
+			<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>
+							)
+						}
+					</>
+				}
+				{/* 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 text-white ${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/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;
 }