namirasoft-site-react 1.4.552 → 1.4.554

package/src/components/NSCopyBox.module.css

@@ -1,40 +1,40 @@
-.ns_copy {
-    display: flex;
-    flex-direction: column;
-    width: 416px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-    margin: 0 auto;
-}
-
-.ns_copy_value {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-    text-align: center;
-    overflow: hidden;
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    border-radius: 8px;
-    border: 1px solid rgba(161, 164, 176, 1);
-    background-color: #fff;
-}
-
-.ns_copy_value p {
-    color: rgba(20, 27, 92, 1);
-    width: 100%;
-    display: inline-block;
-    overflow: hidden;
-    word-wrap: break-word;
-}
-
-.ns_copy_title {
-    font-size: 24px;
-    font-weight: 700;
-    color: rgba(20, 27, 92, 1);
-    text-align: center;
-    margin-bottom: 16px;
+.ns_copy {
+    display: flex;
+    flex-direction: column;
+    width: 416px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.ns_copy_value {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    overflow: hidden;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid rgba(161, 164, 176, 1);
+    background-color: #fff;
+}
+
+.ns_copy_value p {
+    color: rgba(20, 27, 92, 1);
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.ns_copy_title {
+    font-size: 24px;
+    font-weight: 700;
+    color: rgba(20, 27, 92, 1);
+    text-align: center;
+    margin-bottom: 16px;
 }

package/src/components/NSCopyBox.tsx

@@ -1,54 +1,54 @@
-import { useRef, useState } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-import Styles from "./NSCopyBox.module.css";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSCopyBoxProps extends IBaseComponentProps
-{
-	title?: string;
-	value: string;
-}
-
-export interface NSCopyBoxState
-{
-	copied: boolean;
-}
-
-export function NSCopyBox(props: NSCopyBoxProps)
-{
-	const service = useRef<SetTimeouService>(new SetTimeouService());
-
-	let [state, setState] = useState<NSCopyBoxState>({ copied: false });
-
-	function onCopy(): void
-	{
-		if (navigator.clipboard && navigator.clipboard.writeText)
-		{
-			navigator.clipboard.writeText(props.value);
-
-			setState({ copied: true });
-			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
-		}
-	}
-
-	return (
-		<div id={props.id}
-			className={`${Styles.ns_copy} ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			<div className={Styles.ns_copy_value}>
-				{
-					props.title && <p className="m-0">{props.title}</p>
-				}
-				<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
-					alt='Copy'
-					width={16}
-					height={16}
-					onClick={onCopy}
-					style={{ cursor: "pointer" }}
-				/>
-			</div>
-		</div>
-	);
+import { useRef, useState } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+import Styles from "./NSCopyBox.module.css";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSCopyBoxProps extends IBaseComponentProps
+{
+	title?: string;
+	value: string;
+}
+
+export interface NSCopyBoxState
+{
+	copied: boolean;
+}
+
+export function NSCopyBox(props: NSCopyBoxProps)
+{
+	const service = useRef<SetTimeouService>(new SetTimeouService());
+
+	let [state, setState] = useState<NSCopyBoxState>({ copied: false });
+
+	function onCopy(): void
+	{
+		if (navigator.clipboard && navigator.clipboard.writeText)
+		{
+			navigator.clipboard.writeText(props.value);
+
+			setState({ copied: true });
+			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
+		}
+	}
+
+	return (
+		<div id={props.id}
+			className={`${Styles.ns_copy} ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			<div className={Styles.ns_copy_value}>
+				{
+					props.title && <p className="m-0">{props.title}</p>
+				}
+				<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
+					alt='Copy'
+					width={16}
+					height={16}
+					onClick={onCopy}
+					style={{ cursor: "pointer" }}
+				/>
+			</div>
+		</div>
+	);
 }

package/src/components/NSDialog.module.css

@@ -1,106 +1,106 @@
-.ns_dialog_container,
-.ns_dialog_container_center {
-	background-color: #00000080;
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	z-index: 899;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding-top: 6.125rem;
-}
-
-.ns_dialog_background {
-	background-color: #00000080;
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	z-index: 899;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-}
-
-.ns_dialog_parent {
-	z-index: 900;
-	position: absolute;
-	color: black;
-	cursor: default;
-	min-width: 350px;
-	min-height: 50px;
-	max-width: 90vw;
-	max-height: calc(100dvh - 6.125rem);
-}
-
-.ns_dialog_content {
-	border: 8px solid rgb(233, 232, 232);
-	border-radius: 24px;
-	background-color: white;
-	z-index: 900;
-	min-width: 350px;
-	min-height: 50px;
-	max-width: 90vw;
-	max-height: calc(100dvh - 6.125rem);
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-	color: black;
-	cursor: default;
-}
-
-.ns_dialog_children {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 16px;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_dialog_container {
-		background-color: none;
-		position: relative;
-		display: unset;
-	}
-
-	.ns_dialog_background {
-		background-color: #00000080;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 899;
-	}
-
-	.ns_dialog_container,
-	.ns_dialog_container_center {
-		padding-top: 4rem;
-	}
-
-	.ns_dialog_container_center>.ns_dialog_parent {
-		left: 0;
-		position: relative;
-	}
-
-	.ns_dialog_parent {
-		right: 0;
-	}
-
-	.ns_dialog_parent,
-	.ns_dialog_content {
-		max-height: calc(100dvh - 4rem);
-	}
+.ns_dialog_container,
+.ns_dialog_container_center {
+	background-color: #00000080;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 899;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding-top: 6.125rem;
+}
+
+.ns_dialog_background {
+	background-color: #00000080;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 899;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+
+.ns_dialog_parent {
+	z-index: 900;
+	position: absolute;
+	color: black;
+	cursor: default;
+	min-width: 350px;
+	min-height: 50px;
+	max-width: 90vw;
+	max-height: calc(100dvh - 6.125rem);
+}
+
+.ns_dialog_content {
+	border: 8px solid rgb(233, 232, 232);
+	border-radius: 24px;
+	background-color: white;
+	z-index: 900;
+	min-width: 350px;
+	min-height: 50px;
+	max-width: 90vw;
+	max-height: calc(100dvh - 6.125rem);
+	width: 100%;
+	height: 100%;
+	overflow-y: auto;
+	color: black;
+	cursor: default;
+}
+
+.ns_dialog_children {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 16px;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_dialog_container {
+		background-color: none;
+		position: relative;
+		display: unset;
+	}
+
+	.ns_dialog_background {
+		background-color: #00000080;
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 899;
+	}
+
+	.ns_dialog_container,
+	.ns_dialog_container_center {
+		padding-top: 4rem;
+	}
+
+	.ns_dialog_container_center>.ns_dialog_parent {
+		left: 0;
+		position: relative;
+	}
+
+	.ns_dialog_parent {
+		right: 0;
+	}
+
+	.ns_dialog_parent,
+	.ns_dialog_content {
+		max-height: calc(100dvh - 4rem);
+	}
 }

package/src/components/NSDialog.tsx

@@ -1,73 +1,73 @@
-import { ReactNode } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSDialog.module.css';
-
-export interface NSDialogProps extends IBaseComponentProps
-{
-	onClose: () => void;
-	children?: ReactNode;
-	center_dialog?: boolean;
-	closeButton?: {
-		show?: boolean;
-		out?: boolean;
-	},
-	zIndex?: number;
-}
-
-export function NSDialog(props: NSDialogProps)
-{
-	return (
-		<section
-			id={props.id}
-			className={props.center_dialog ? Styles.ns_dialog_container_center : Styles.ns_dialog_container}
-			style={{ zIndex: props.zIndex }}
-		>
-			<div
-				className={Styles.ns_dialog_background}
-				style={{ zIndex: props.zIndex }}
-				onClick={() => props.onClose()}
-			>
-			</div>
-			<div
-				className={`${Styles.ns_dialog_parent} ${props.classList?.join(" ") ?? ""}`}
-				style={{ ...props.style, zIndex: props.zIndex }}
-			>
-				{
-					props.closeButton?.show !== false && <div
-						onClick={() => props.onClose()}
-						style=
-						{{
-							position: "absolute",
-							top: (props.closeButton?.out) ? "-40px" : "0px",
-							right: (props.closeButton?.out) ? "-40px" : "0px",
-							transform: "translate(-40%,40%)",
-							cursor: "pointer",
-							width: "24px",
-							height: "24px",
-						}}
-					>
-						<img
-							src={(props.closeButton?.out) ? 'https://static.namirasoft.com/image/concept/close/white.svg' : 'https://static.namirasoft.com/image/concept/close/blue.svg'}
-
-							alt='close'
-							width={24}
-							height={24}
-							style=
-							{{
-								position: "absolute"
-							}}
-							onClick={() => props.onClose()} />
-					</div>
-				}
-				<div
-					className={`${Styles.ns_dialog_content}`}
-					style={{ zIndex: props.zIndex }}
-				>
-					<div className={Styles.ns_dialog_children}>
-						{props.children}
-					</div>
-				</div>
-			</div>
-		</section >
-	);
+import { ReactNode } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSDialog.module.css';
+
+export interface NSDialogProps extends IBaseComponentProps
+{
+	onClose: () => void;
+	children?: ReactNode;
+	center_dialog?: boolean;
+	closeButton?: {
+		show?: boolean;
+		out?: boolean;
+	},
+	zIndex?: number;
+}
+
+export function NSDialog(props: NSDialogProps)
+{
+	return (
+		<section
+			id={props.id}
+			className={props.center_dialog ? Styles.ns_dialog_container_center : Styles.ns_dialog_container}
+			style={{ zIndex: props.zIndex }}
+		>
+			<div
+				className={Styles.ns_dialog_background}
+				style={{ zIndex: props.zIndex }}
+				onClick={() => props.onClose()}
+			>
+			</div>
+			<div
+				className={`${Styles.ns_dialog_parent} ${props.classList?.join(" ") ?? ""}`}
+				style={{ ...props.style, zIndex: props.zIndex }}
+			>
+				{
+					props.closeButton?.show !== false && <div
+						onClick={() => props.onClose()}
+						style=
+						{{
+							position: "absolute",
+							top: (props.closeButton?.out) ? "-40px" : "0px",
+							right: (props.closeButton?.out) ? "-40px" : "0px",
+							transform: "translate(-40%,40%)",
+							cursor: "pointer",
+							width: "24px",
+							height: "24px",
+						}}
+					>
+						<img
+							src={(props.closeButton?.out) ? 'https://static.namirasoft.com/image/concept/close/white.svg' : 'https://static.namirasoft.com/image/concept/close/blue.svg'}
+
+							alt='close'
+							width={24}
+							height={24}
+							style=
+							{{
+								position: "absolute"
+							}}
+							onClick={() => props.onClose()} />
+					</div>
+				}
+				<div
+					className={`${Styles.ns_dialog_content}`}
+					style={{ zIndex: props.zIndex }}
+				>
+					<div className={Styles.ns_dialog_children}>
+						{props.children}
+					</div>
+				</div>
+			</div>
+		</section >
+	);
 }

package/src/components/NSDialogBox.tsx

@@ -1,39 +1,39 @@
-import { Component, RefObject } from 'react';
-import { NSButtonProps } from "./NSButton";
-import { NSButtonBlue } from "./NSButtonBlue";
-import { NSColumn } from "./NSColumn";
-import { NSDialog, NSDialogProps } from "./NSDialog";
-
-export interface INSDialogBoxBaseProps<ChildrenType> extends NSDialogProps
-{
-    button?: NSButtonProps<ChildrenType>;
-}
-
-export interface NSDialogBoxProps<ChildrenType> extends INSDialogBoxBaseProps<ChildrenType>
-{
-    children_ref: RefObject<ChildrenType>;
-}
-
-export class NSDialogBox<ChildrenType> extends Component<NSDialogBoxProps<ChildrenType>>
-{
-    override render()
-    {
-        return (
-            <NSDialog {...this.props} center_dialog>
-                <NSColumn style={{ alignItems: "center" }}>
-                    {this.props.children}
-                    <NSButtonBlue
-                        {...this.props.button}
-                        onClick={{
-                            action: (onFinished) =>
-                            {
-                                this.props.button?.onClick.action(onFinished, this.props.children_ref?.current as ChildrenType);
-                            },
-                            showLoading: this.props.button?.onClick.showLoading
-                        }}
-                    />
-                </NSColumn>
-            </NSDialog>
-        );
-    }
+import { Component, RefObject } from 'react';
+import { NSButtonProps } from "./NSButton";
+import { NSButtonBlue } from "./NSButtonBlue";
+import { NSColumn } from "./NSColumn";
+import { NSDialog, NSDialogProps } from "./NSDialog";
+
+export interface INSDialogBoxBaseProps<ChildrenType> extends NSDialogProps
+{
+    button?: NSButtonProps<ChildrenType>;
+}
+
+export interface NSDialogBoxProps<ChildrenType> extends INSDialogBoxBaseProps<ChildrenType>
+{
+    children_ref: RefObject<ChildrenType>;
+}
+
+export class NSDialogBox<ChildrenType> extends Component<NSDialogBoxProps<ChildrenType>>
+{
+    override render()
+    {
+        return (
+            <NSDialog {...this.props} center_dialog>
+                <NSColumn style={{ alignItems: "center" }}>
+                    {this.props.children}
+                    <NSButtonBlue
+                        {...this.props.button}
+                        onClick={{
+                            action: (onFinished) =>
+                            {
+                                this.props.button?.onClick.action(onFinished, this.props.children_ref?.current as ChildrenType);
+                            },
+                            showLoading: this.props.button?.onClick.showLoading
+                        }}
+                    />
+                </NSColumn>
+            </NSDialog>
+        );
+    }
 }

package/src/components/NSDialogBoxDate.tsx

@@ -1,29 +1,29 @@
-import { Component, createRef } from 'react';
-import { NSDialogBox, INSDialogBoxBaseProps } from "./NSDialogBox";
-import { NSBoxDate, NSBoxDateProps } from "./NSBoxDate";
-
-export interface NSDialogBoxDateProps extends INSDialogBoxBaseProps<NSBoxDate>
-{
-    box: NSBoxDateProps;
-}
-
-export class NSDialogBoxDate extends Component<NSDialogBoxDateProps>
-{
-    private NSBoxDate_Ref = createRef<NSBoxDate>();
-
-    override render()
-    {
-        return (
-            <NSDialogBox
-                {...this.props}
-                children_ref={this.NSBoxDate_Ref}
-            >
-                <NSBoxDate
-                    {...this.props.box}
-                    ref={this.NSBoxDate_Ref}
-                />
-                {this.props.children}
-            </NSDialogBox>
-        );
-    }
+import { Component, createRef } from 'react';
+import { NSDialogBox, INSDialogBoxBaseProps } from "./NSDialogBox";
+import { NSBoxDate, NSBoxDateProps } from "./NSBoxDate";
+
+export interface NSDialogBoxDateProps extends INSDialogBoxBaseProps<NSBoxDate>
+{
+    box: NSBoxDateProps;
+}
+
+export class NSDialogBoxDate extends Component<NSDialogBoxDateProps>
+{
+    private NSBoxDate_Ref = createRef<NSBoxDate>();
+
+    override render()
+    {
+        return (
+            <NSDialogBox
+                {...this.props}
+                children_ref={this.NSBoxDate_Ref}
+            >
+                <NSBoxDate
+                    {...this.props.box}
+                    ref={this.NSBoxDate_Ref}
+                />
+                {this.props.children}
+            </NSDialogBox>
+        );
+    }
 }