namirasoft-site-react 1.3.304 → 1.3.306

package/dist/components/NSBoxOTP.module.css

@@ -1,11 +1,11 @@
-.ns_otp_input{
-    border: none;
-    background-color: transparent;
-    border-bottom: 2px solid #141B5C;
-}
-
-.ns_otp_input:focus{
-    border: none;
-    outline: none;
-    border-bottom: 2px solid #141B5C;
+.ns_otp_input{
+    border: none;
+    background-color: transparent;
+    border-bottom: 2px solid #141B5C;
+}
+
+.ns_otp_input:focus{
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #141B5C;
 }

package/dist/components/NSBoxText.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+export interface INSBoxTextProps extends IBaseComponentProps, IValidationProps, IValidationStringProps {
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}
+export interface INSBoxTextState {
+    value: string;
+    error?: string;
+    isFullScreen: boolean;
+}
+export declare class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState> {
+    constructor(props: INSBoxTextProps);
+    getError(): string | null;
+    getValue(): string;
+    setValue(value: string): void;
+    private onChanged;
+    private toggleFullScreen;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default NSBoxText;

package/dist/components/NSBoxText.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputText from '../assets/images/icon-input-text.svg';
+import IconFullScreen from '../assets/images/icon-fullscreen.png';
+import IconCopy from '../assets/images/icon-copy.png';
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import CopyToClipboard from '../CopyToClipboard';
+export class NSBoxText extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+        this.toggleFullScreen = this.toggleFullScreen.bind(this);
+    }
+    getError() {
+        return (Validator.getError(this.props.title, this.state.value, this.props) ||
+            Validator.getErrorString(this.props.title, this.state.value, this.props));
+    }
+    getValue() {
+        let error = this.getError();
+        if (error) {
+            this.setState({ error });
+            setTimeout(() => {
+                this.setState({ error: "" });
+            }, 7000);
+            return '';
+        }
+        return this.state.value;
+    }
+    setValue(value) {
+        this.setState({ value });
+    }
+    onChanged(e) {
+        this.setValue(e.target.value);
+        if (this.props.onChanged) {
+            this.props.onChanged(e);
+        }
+    }
+    toggleFullScreen() {
+        this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }), () => {
+            console.log("isFullScreen state updated:", this.state.isFullScreen);
+        });
+    }
+    render() {
+        var _a;
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title] }), _jsxs("div", { className: "d-flex gap-1", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: () => CopyToClipboard.copyToClipboard(this.getValue()), children: _jsx("img", { src: IconCopy, alt: "Copy", width: 14, height: 14 }) }), _jsx("button", { className: Styles.ns_btn_box, onClick: this.toggleFullScreen, children: _jsx("img", { src: IconFullScreen, alt: "FullScreen", width: 14, height: 14 }) })] })] }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder, style: { background: `url(${IconInputText}) white no-repeat scroll center right 16px` } })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
+    }
+}
+export default NSBoxText;
+//# sourceMappingURL=NSBoxText.js.map

package/dist/components/NSBoxText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSBoxText.js","sourceRoot":"","sources":["../../src/components/NSBoxText.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSBoxTextArea.module.css

@@ -1,77 +1,77 @@
-.ns_text_area_parent {
-	display: flex;
-	flex-direction: column;
-	width: fit-content;
-	color: #141B5C;
-	position: relative;
-	justify-content: center;
-	width: 100%;
-	max-width: 560px;
-}
-
-.ns_text_area_container {
-	display: flex;
-	align-items: center;
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-.ns_text_area_icon_container {
-	margin: 0 !important;
-	position: absolute;
-	right: 12px;
-	top: 10px;
-}
-
-.ns_text_area {
-	border-radius: 8px;
-	padding: 10px 12px 10px 12px;
-	font-size: 16px;
-	font-weight: 400;
-	border: 1px solid rgba(0, 0, 0, 1) !important;
-	width: 100%;
-}
-
-.ns_text_area_title {
-	font-size: 16px;
-	font-weight: 400;
-}
-
-.ns_btn_box {
-	opacity: 0;
-	visibility: hidden;
-	color: #000;
-	border: none;
-	cursor: pointer;
-	width: max-content;
-	background-color: transparent;
-}
-
-.ns_text_area_parent:hover .ns_btn_box {
-	opacity: 1;
-	visibility: visible;
-	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
-}
-
-.ns_btn_box img {
-	position: inherit;
-}
-
-.ns_full_screen {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: #0101015c;
-	z-index: 1000;
-	padding: 5%;
-	max-width: 100% !important;
-}
-
-.ns_full_screen textarea {
-	width: 100% !important;
-	max-width: 100%;
-	height: 100% !important;
+.ns_text_area_parent {
+	display: flex;
+	flex-direction: column;
+	width: fit-content;
+	color: #141B5C;
+	position: relative;
+	justify-content: center;
+	width: 100%;
+	max-width: 560px;
+}
+
+.ns_text_area_container {
+	display: flex;
+	align-items: center;
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.ns_text_area_icon_container {
+	margin: 0 !important;
+	position: absolute;
+	right: 12px;
+	top: 10px;
+}
+
+.ns_text_area {
+	border-radius: 8px;
+	padding: 10px 12px 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	width: 100%;
+}
+
+.ns_text_area_title {
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.ns_btn_box {
+	opacity: 0;
+	visibility: hidden;
+	color: #000;
+	border: none;
+	cursor: pointer;
+	width: max-content;
+	background-color: transparent;
+}
+
+.ns_text_area_parent:hover .ns_btn_box {
+	opacity: 1;
+	visibility: visible;
+	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.ns_btn_box img {
+	position: inherit;
+}
+
+.ns_full_screen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #0101015c;
+	z-index: 1000;
+	padding: 5%;
+	max-width: 100% !important;
+}
+
+.ns_full_screen textarea {
+	width: 100% !important;
+	max-width: 100%;
+	height: 100% !important;
 }

package/dist/components/NSButton.module.css

@@ -1,28 +1,28 @@
-.ns_button {
-    background-color: transparent;
-    border-radius: 8px;
-    color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 600;
-    height: 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    max-width: 100%;
-    transition: all 0.2s ease-in-out;
-    width: 100%;
-}
-
-.ns_button:hover {
-    box-shadow: 0 0 10px 2px rgba(119, 117, 117, 0.4);
-    scale: 1.02;
-}
-
-
-@media only screen and (min-width: 380px) {
-    .ns_button {
-        width: 272px;
-    }
+.ns_button {
+    background-color: transparent;
+    border-radius: 8px;
+    color: rgba(20, 27, 92, 1);
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    max-width: 100%;
+    transition: all 0.2s ease-in-out;
+    width: 100%;
+}
+
+.ns_button:hover {
+    box-shadow: 0 0 10px 2px rgba(119, 117, 117, 0.4);
+    scale: 1.02;
+}
+
+
+@media only screen and (min-width: 380px) {
+    .ns_button {
+        width: 272px;
+    }
 }

package/dist/components/NSButtonBlue.module.css

@@ -1,5 +1,5 @@
-.ns_button_blue {
-    background-color: rgba(3, 119, 255, 1);
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
-	color: #fff !important;
+.ns_button_blue {
+    background-color: rgba(3, 119, 255, 1);
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
+	color: #fff !important;
 }

package/dist/components/NSButtonGreen.module.css

@@ -1,5 +1,5 @@
-.ns_button_green {
-    background-color: #06D182;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff !important;
+.ns_button_green {
+    background-color: #06D182;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff !important;
 }

package/dist/components/NSButtonRed.module.css

@@ -1,5 +1,5 @@
-.ns_button_red {
-    background-color: #FF3F3F;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff;
+.ns_button_red {
+    background-color: #FF3F3F;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff;
 }

package/dist/components/NSCard.module.css

@@ -1,109 +1,109 @@
-.ns_card {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	/* gap: 24px 0; */
-	background-color: #fff;
-	box-shadow: 0 2px 10px 4px #00000040;
-	padding: 24px;
-	border-radius: 24px;
-	max-width: 310px;
-	position: relative;
-}
-
-.ns_card_detail_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	color: #001664;
-}
-
-.ns_card_title_img {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 8px;
-	width: 100%;
-}
-
-.ns_card_img {
-	border-radius: 16px;
-	object-fit: cover;
-	width: 100px;
-	height: 100%;
-}
-
-.ns_card_title {
-	font-style: inherit;
-	font-size: 24px;
-	font-weight: 700;
-	font-family: inherit;
-	line-height: normal;
-	text-align: center;
-	width: 100%;
-	color: inherit;
-}
-
-.ns_card_headline {
-	font-style: normal;
-	font-size: 18px;
-	font-weight: 500;
-	font-family: inherit;
-	line-height: normal;
-	text-align: justify;
-	color: inherit;
-}
-
-.ns_card_description {
-	font-style: normal;
-	font-size: 16px;
-	font-weight: 400;
-	font-family: inherit;
-	line-height: normal;
-	text-align: justify;
-	color: inherit;
-}
-
-.ns_card_link {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 12px 24px;
-	background-color: #3963FF;
-	box-shadow: inset 2px 2px 2px 0 #1754F3;
-	color: #fff;
-	font-weight: 400;
-	font-style: inherit;
-	line-height: normal;
-	border-radius: 24px;
-	width: 100%;
-	max-width: 272px;
-	margin-top: 24px;
-}
-
-.ns_card_link_container {
-	width: 100%;
-}
-
-
-@media only screen and (min-width: 576px) {
-	.ns_card {
-		width: 65%;
-	}
-}
-
-@media only screen and (min-width: 768px) {
-	.ns_card {
-		width: 41%;
-	}
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_card {
-		width: 25%;
-	}
+.ns_card {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	/* gap: 24px 0; */
+	background-color: #fff;
+	box-shadow: 0 2px 10px 4px #00000040;
+	padding: 24px;
+	border-radius: 24px;
+	max-width: 310px;
+	position: relative;
+}
+
+.ns_card_detail_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	color: #001664;
+}
+
+.ns_card_title_img {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 8px;
+	width: 100%;
+}
+
+.ns_card_img {
+	border-radius: 16px;
+	object-fit: cover;
+	width: 100px;
+	height: 100%;
+}
+
+.ns_card_title {
+	font-style: inherit;
+	font-size: 24px;
+	font-weight: 700;
+	font-family: inherit;
+	line-height: normal;
+	text-align: center;
+	width: 100%;
+	color: inherit;
+}
+
+.ns_card_headline {
+	font-style: normal;
+	font-size: 18px;
+	font-weight: 500;
+	font-family: inherit;
+	line-height: normal;
+	text-align: justify;
+	color: inherit;
+}
+
+.ns_card_description {
+	font-style: normal;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: inherit;
+	line-height: normal;
+	text-align: justify;
+	color: inherit;
+}
+
+.ns_card_link {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12px 24px;
+	background-color: #3963FF;
+	box-shadow: inset 2px 2px 2px 0 #1754F3;
+	color: #fff;
+	font-weight: 400;
+	font-style: inherit;
+	line-height: normal;
+	border-radius: 24px;
+	width: 100%;
+	max-width: 272px;
+	margin-top: 24px;
+}
+
+.ns_card_link_container {
+	width: 100%;
+}
+
+
+@media only screen and (min-width: 576px) {
+	.ns_card {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	.ns_card {
+		width: 41%;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_card {
+		width: 25%;
+	}
 }

package/dist/components/NSCopyToClipboard.module.css

@@ -1,40 +1,40 @@
-.ns_copy_to_clipboard {
-    display: flex;
-    flex-direction: column;
-    width: 416px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-    margin: 0 auto;
-}
-
-.ns_copy_to_clipboard_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_to_clipboard_value p {
-    color: rgba(20, 27, 92, 1);
-    width: 100%;
-    display: inline-block;
-    overflow: hidden;
-    word-wrap: break-word;
-}
-
-.ns_copy_to_clipboard_title {
-    font-size: 24px;
-    font-weight: 700;
-    color: rgba(20, 27, 92, 1);
-    text-align: center;
-    margin-bottom: 16px;
+.ns_copy_to_clipboard {
+    display: flex;
+    flex-direction: column;
+    width: 416px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.ns_copy_to_clipboard_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_to_clipboard_value p {
+    color: rgba(20, 27, 92, 1);
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.ns_copy_to_clipboard_title {
+    font-size: 24px;
+    font-weight: 700;
+    color: rgba(20, 27, 92, 1);
+    text-align: center;
+    margin-bottom: 16px;
 }