namirasoft-site-react 1.3.403 → 1.3.405

package/dist/main.js

@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
 export * from "./components/NSBoxIPV4";
 export * from "./components/NSBoxIPV6";
 export * from "./components/NSBoxLabel";
-export * from "./components/NSBoxOTP";
 export * from "./components/NSBoxPassword";
 export * from "./components/NSBoxPhone";
 export * from "./components/NSBoxPrice";
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
 export * from "./components/NSTag";
 export * from "./components/NSTabPage";
 export * from "./components/NSTitle";
-export * from "./components/NSVerification";
 export * from "./formatter/BackColorFormatter";
 export * from "./formatter/BaseColumnFormatter";
 export * from "./formatter/BooleanFormatter";

package/dist/main.js.map

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

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.403",
+    "version": "1.3.405",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.tsx

@@ -3,8 +3,8 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { NSBarAction, NSBoxBoolean, NSBoxEmail, NSBoxEnum, NSBoxSearch, NSBoxString, NSEntityBar, NSLayout, NSNoData, NSPagination, NSPanel, NSRepeater, NSSpace, NSSpaceSizeType, NSTabPage } from './main';
 import { NSBoxLabel } from './components/NSBoxLabel';
 import { NSRadioButton } from './components/NSRadioButton';
-import NSTag, { NSTagValue } from './components/NSTag';
-import NSButton from './components/NSButton';
+import { NSTag, NSTagValue } from './components/NSTag';
+import { NSButton } from './components/NSButton';
 import { useState } from 'react';
 import { NSDialog } from './components/NSDialog';
 

package/src/CopyToClipboard.ts

@@ -1,4 +1,4 @@
-export default class CopyToClipboard
+export class CopyToClipboard
 {
     static copyToClipboard(value: string): void
     {

package/src/components/NSAssistantButton.tsx

@@ -1,8 +1,8 @@
+import { useState } from 'react';
+import { CopyToClipboard } from '../CopyToClipboard';
 import Styles from './NSAssistantButton.module.css';
 import IconCopy from '../assets/images/icon-copy.png';
 import IconFullScreen from '../assets/images/icon-fullscreen.png';
-import { useState } from 'react';
-import CopyToClipboard from '../CopyToClipboard';
 
 export interface INSAssistantProps
 {
@@ -10,7 +10,7 @@ export interface INSAssistantProps
     setValue: (value: string) => void;
 }
 
-function NSAssistantButton(props: INSAssistantProps)
+export function NSAssistantButton(props: INSAssistantProps)
 {
     let [fullscreen, setFullscreen] = useState(false);
     let [value, setValue] = useState(props.value);
@@ -70,6 +70,4 @@ function NSAssistantButton(props: INSAssistantProps)
             </div>
         </div>
     );
-}
-
-export default NSAssistantButton;
+}

package/src/components/NSBoxEmail.tsx

@@ -1,14 +1,13 @@
 "use client";
-
 import React from "react";
-import Styles from "./NSBox.module.css";
-import IconInputEmail from '../assets/images/icon-input-email.svg';
 import { Validator } from "../Validator";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
-import NSAssistantButton from "./NSAssistantButton";
+import { NSAssistantButton } from "./NSAssistantButton";
+import Styles from "./NSBox.module.css";
+import IconInputEmail from '../assets/images/icon-input-email.svg';
 
 export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -103,6 +102,4 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 			</>
 		);
 	}
-}
-
-export default NSBoxEmail;
+}

package/src/components/NSBoxSearch.tsx

@@ -1,13 +1,12 @@
 "use client";
-
 import React from "react";
-import Styles from "./NSBox.module.css";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
-import NSAssistantButton from "./NSAssistantButton";
+import { NSAssistantButton } from "./NSAssistantButton";
+import Styles from "./NSBox.module.css";
 
 export interface INSBoxSearchProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {

package/src/components/NSBoxString.tsx

@@ -1,14 +1,13 @@
 "use client";
-
 import React from "react";
-import Styles from "./NSBox.module.css";
-import IconInputString from '../assets/images/icon-input-string.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
-import NSAssistantButton from "./NSAssistantButton";
+import { NSAssistantButton } from "./NSAssistantButton";
+import Styles from "./NSBox.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
 
 export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {

package/src/components/NSButton.tsx

@@ -9,7 +9,7 @@ export interface INSButtonProps extends IBaseComponentProps
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-export default function NSButton(props: INSButtonProps)
+export function NSButton(props: INSButtonProps)
 {
     return (
         <button id={props.id}

package/src/components/NSButtonBlue.tsx

@@ -1,6 +1,5 @@
-import NSButton from "./NSButton";
+import { NSButton, INSButtonProps } from "./NSButton";
 import Style from "./NSButtonBlue.module.css";
-import { INSButtonProps } from "./NSButton";
 
 export function NSButtonBlue(props: INSButtonProps) 
 {

package/src/components/NSButtonGreen.tsx

@@ -1,6 +1,5 @@
-import NSButton from "./NSButton";
+import {NSButton, INSButtonProps } from "./NSButton";
 import Style from "./NSButtonGreen.module.css";
-import { INSButtonProps } from "./NSButton";
 
 export function NSButtonGreen(props: INSButtonProps) 
 {

package/src/components/NSButtonRed.tsx

@@ -1,6 +1,5 @@
-import NSButton from "./NSButton";
+import { NSButton, INSButtonProps } from "./NSButton";
 import Style from "./NSButtonRed.module.css";
-import { INSButtonProps } from "./NSButton";
 
 export function NSButtonRed(props: INSButtonProps) 
 {

package/src/components/NSElectronicCard.tsx

@@ -8,7 +8,7 @@ export interface INSElectronicCardProps
     info?: string;
     alt?: string;
 }
-function NSElectronicCard(props: INSElectronicCardProps)
+export function NSElectronicCard(props: INSElectronicCardProps)
 {
     if (props.cardNumber.length < 15)
     {
@@ -43,6 +43,4 @@ function NSElectronicCard(props: INSElectronicCardProps)
             </div>
         </section >
     );
-}
-
-export default NSElectronicCard;
+}

package/src/components/NSFilterBox.tsx

@@ -4,7 +4,7 @@ import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import { NSFilterItem } from './NSFilterItem';
 import { FilterItem, FilterItemColumnType, FilterItemOperator } from 'namirasoft-core';
 import {NSGroupedList, INSGroupedListProps_Group } from './NSGroupedList';
-import NSButton from './NSButton';
+import { NSButton } from './NSButton';
 import Styles from './NSFilterBox.module.css';
 
 export interface INSFilterBoxProps extends IBaseComponentProps

package/src/components/NSPageSelectionModal.tsx

@@ -224,6 +224,4 @@ export class NSPageSelectionModal<RowType> extends Component<NSPageSelectionModa
             </>
         );
     }
-}
-
-export default NSPageSelectionModal;
+}

package/src/components/NSTable.tsx

@@ -1,18 +1,17 @@
 "use client";
-
-import NSButton from './NSButton';
-import { NSPagination } from './NSPagination';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSTable.module.css';
-import { Component } from 'react';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import React from "react";
+import { Component } from 'react';
+import { writeFile, utils } from 'xlsx';
+import { NSButton } from './NSButton';
+import { NSPagination } from './NSPagination';
 import { NSInfoDialog } from './NSInfoDialog';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { NSPageSelectionModal } from './NSPageSelectionModal';
 import { NSLoading } from './NSLoading';
 import { NSNoData } from './NSNoData';
-import { writeFile, utils } from 'xlsx';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
+import Styles from './NSTable.module.css';
 
 export interface TableColumnInfo
 {

package/src/components/NSTag.tsx

@@ -1,75 +1,74 @@
 import { Component, createRef } from 'react';
 import { NSBoxString } from './NSBoxString';
-import NSButton from './NSButton';
+import { NSButton } from './NSButton';
 import Styles from './NSTag.module.css';
 
 export interface NSTagProps
 {
-    onChanged?: () => void;
-    onDeleted?: () => void;
+	onChanged?: () => void;
+	onDeleted?: () => void;
 }
 export interface NSTagValue
 {
-    name: string;
-    value: string;
-    description?: string;
+	name: string;
+	value: string;
+	description?: string;
 }
 
-class NSTag extends Component<NSTagProps>
+export class NSTag extends Component<NSTagProps>
 {
-    static isEmpty(value: NSTagValue)
-    {
-        if (value.name || value.value || value.description)
-            return false
-        return true;
-    }
+	static isEmpty(value: NSTagValue)
+	{
+		if (value.name || value.value || value.description)
+			return false
+		return true;
+	}
 
-    private NSBoxString_Key = createRef<NSBoxString>();
-    private NSBoxString_Value = createRef<NSBoxString>();
-    private NSBoxString_Description = createRef<NSBoxString>();
+	private NSBoxString_Key = createRef<NSBoxString>();
+	private NSBoxString_Value = createRef<NSBoxString>();
+	private NSBoxString_Description = createRef<NSBoxString>();
 
-    getValue(checkError: boolean = true): NSTagValue
-    {
-        let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
-        let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
-        let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
-        return {
-            name,
-            value,
-            description
-        };
-    }
-    setValue(value: NSTagValue)
-    {
-        this.NSBoxString_Key.current?.setValue(value.name);
-        this.NSBoxString_Value.current?.setValue(value.value);
-        this.NSBoxString_Description.current?.setValue(value.description ?? "");
-    }
-    override render()
-    {
-        return (
-            <section className={Styles.ns_tag_input_container} >
-                <div className={Styles.ns_tag_input_group}>
-                    <NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
-                    <NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
-                    <NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
-                    <NSButton
-                        title='Remove'
-                        onClick={() =>
-                        {
-                            if (this.props.onDeleted)
-                                this.props.onDeleted();
-                        }}
-                        style={{
-                            backgroundColor: "transparent",
-                            border: "1px solid rgba(3, 119, 255, 1)",
-                            width: "145px",
-                            marginTop: "28px"
-                        }}
-                    />
-                </div>
-            </section>
-        );
-    }
-}
-export default NSTag;
+	getValue(checkError: boolean = true): NSTagValue
+	{
+		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
+		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
+		let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
+		return {
+			name,
+			value,
+			description
+		};
+	}
+	setValue(value: NSTagValue)
+	{
+		this.NSBoxString_Key.current?.setValue(value.name);
+		this.NSBoxString_Value.current?.setValue(value.value);
+		this.NSBoxString_Description.current?.setValue(value.description ?? "");
+	}
+	override render()
+	{
+		return (
+			<section className={Styles.ns_tag_input_container} >
+				<div className={Styles.ns_tag_input_group}>
+					<NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
+					<NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
+					<NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
+					<NSButton
+						title='Remove'
+						onClick={() =>
+						{
+							if (this.props.onDeleted)
+								this.props.onDeleted();
+						}}
+						style={{
+							backgroundColor: "transparent",
+							border: "1px solid rgba(3, 119, 255, 1)",
+							width: "145px",
+							marginTop: "28px"
+						}}
+					/>
+				</div>
+			</section>
+		);
+	}
+}

package/src/main.ts

@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
 export * from "./components/NSBoxIPV4";
 export * from "./components/NSBoxIPV6";
 export * from "./components/NSBoxLabel";
-export * from "./components/NSBoxOTP";
 export * from "./components/NSBoxPassword";
 export * from "./components/NSBoxPhone";
 export * from "./components/NSBoxPrice";
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
 export * from "./components/NSTag";
 export * from "./components/NSTabPage";
 export * from "./components/NSTitle";
-export * from "./components/NSVerification";
 export * from "./formatter/BackColorFormatter";
 export * from "./formatter/BaseColumnFormatter";
 export * from "./formatter/BooleanFormatter";

package/dist/components/NSBoxOTP.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-interface INSBoxOTPProps extends IBaseComponentProps {
-    placeholder?: string;
-    defaultValue?: string;
-    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare function NSBoxOTP(props: INSBoxOTPProps): import("react/jsx-runtime").JSX.Element;
-export default NSBoxOTP;

package/dist/components/NSBoxOTP.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
-import Styles from './NSBoxOTP.module.css';
-function NSBoxOTP(props) {
-    var _a;
-    let [state, setState] = useState("");
-    const [values, setValues] = useState(Array(6).fill(''));
-    const inputsRef = useRef([]);
-    const handleChange = (index) => (event) => {
-        var _a;
-        const newValue = event.target.value;
-        setState(state + newValue);
-        if (/^\d?$/.test(newValue)) {
-            const updatedValues = [...values];
-            updatedValues[index] = newValue;
-            setValues(updatedValues);
-            if (newValue && index < 5) {
-                (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }
-        if (props.onChanged)
-            props.onChanged(event);
-    };
-    const handleKeyDown = (index) => (event) => {
-        var _a;
-        if (event.key === 'Backspace' && !values[index] && index > 0) {
-            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    return (_jsx("div", { id: props.id, className: `${Styles.ns_input_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: Object.assign(Object.assign({}, props.style), { display: 'flex', gap: '10px' }), children: values.map((value, index) => (_jsx("input", { ref: el => inputsRef.current[index] = el, type: "text", value: value, onChange: handleChange(index), onKeyDown: handleKeyDown(index), maxLength: 1, style: { width: '30px', textAlign: 'center' }, className: Styles.ns_otp_input }, index + 10))) }));
-}
-;
-export default NSBoxOTP;
-//# sourceMappingURL=NSBoxOTP.js.map

package/dist/components/NSBoxOTP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAS1C,SAAS,QAAQ,CAAC,KAAqB;;IAEnC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;;QAE7E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAA;QAC1B,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC1B;YACI,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;YAClC,aAAa,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAChC,SAAS,CAAC,aAAa,CAAC,CAAC;YACzB,IAAI,QAAQ,IAAI,KAAK,GAAG,CAAC,EACzB;gBACI,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;QACD,IAAI,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAA4C,EAAE,EAAE;;QAEtF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAC5D;YACI,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,kCAAO,KAAK,CAAC,KAAK,KAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,eAEtI,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,gBAEI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EACxC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7C,SAAS,EAAE,MAAM,CAAC,YAAY,IARzB,KAAK,GAAG,EAAE,CASjB,CACL,CAAC,GAEH,CACV,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/NSBoxOTP.module.css

@@ -1,11 +0,0 @@
-.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/NSVerification.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { IImageProps } from '../props/IImageProps';
-interface INSVerificationProps extends IBaseComponentProps {
-    verificationType: string;
-    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    image?: IImageProps;
-}
-declare function NSVerification(props: INSVerificationProps): import("react/jsx-runtime").JSX.Element;
-export default NSVerification;

package/dist/components/NSVerification.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import NSBoxOTP from './NSBoxOTP';
-import Styles from './NSVerification.module.css';
-import vector from '../assets/images/verify.png';
-function NSVerification(props) {
-    var _a, _b, _c, _d, _e;
-    const [values, setValue] = useState('');
-    function onChanged(event) {
-        setValue(prevValues => [...prevValues, event.target.value].join(''));
-        if (props.onChanged)
-            props.onChanged(event);
-        console.log(values);
-        return (values);
-    }
-    return (_jsxs("div", { className: `${Styles.ns_verification_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("img", { src: (_c = (_b = props.image) === null || _b === void 0 ? void 0 : _b.src) !== null && _c !== void 0 ? _c : vector, alt: (_e = (_d = props.image) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : 'verification vector', className: Styles.ns_verification_vector }), _jsxs("p", { children: ["Please enter code sent to ", props.verificationType] }), _jsx(NSBoxOTP, { onChanged: onChanged })] }));
-}
-export default NSVerification;
-//# sourceMappingURL=NSVerification.js.map

package/dist/components/NSVerification.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSVerification.js","sourceRoot":"","sources":["../../src/components/NSVerification.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAUhD,SAAS,cAAc,CAAC,KAA0B;;IAC9C,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE/C,SAAS,SAAS,CAAC,KAA0C;QAE/D,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,EAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACtE,IAAI,KAAK,CAAC,SAAS;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IACE,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,aAEZ,cACA,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,MAAM,EAC/B,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,qBAAqB,EAC9C,SAAS,EAAE,MAAM,CAAC,sBAAsB,GACtC,EACF,sDAA8B,KAAK,CAAC,gBAAgB,IAAK,EACzD,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,GAAG,IAC/B,CACT,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}

package/dist/components/NSVerification.module.css

@@ -1,23 +0,0 @@
-.ns_verification_container {
-    background-color: #FFF;
-    border: 1px solid #A1A4B0;
-    backdrop-filter: blur(5px);
-    border-radius: 8px;
-    width: 100%;
-    max-width: 594px;
-    padding: 16px;
-    color: #141B5C !important;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: center;
-}
-
-.ns_verification_container p{
-    text-align: center;
-}
-
-.ns_verification_vector{
-    width: 224px;
-    height: 224px;
-}

package/src/components/NSBoxOTP.module.css

@@ -1,11 +0,0 @@
-.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/src/components/NSBoxOTP.tsx

@@ -1,66 +0,0 @@
-import React, { useState, ChangeEvent, useRef } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSBoxOTP.module.css'
-
-interface INSBoxOTPProps extends IBaseComponentProps
-{
-    placeholder?: string;
-    defaultValue?: string;
-    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-function NSBoxOTP(props: INSBoxOTPProps)
-{
-    let [state, setState] = useState("");
-
-    const [values, setValues] = useState<string[]>(Array(6).fill(''));
-    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
-
-    const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
-    {
-        const newValue = event.target.value;
-        setState(state + newValue)
-        if (/^\d?$/.test(newValue))
-        {
-            const updatedValues = [...values];
-            updatedValues[index] = newValue;
-            setValues(updatedValues);
-            if (newValue && index < 5)
-            {
-                inputsRef.current[index + 1]?.focus();
-            }
-        }
-        if (props.onChanged)
-            props.onChanged(event);
-    };
-
-    const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
-    {
-        if (event.key === 'Backspace' && !values[index] && index > 0)
-        {
-            inputsRef.current[index - 1]?.focus();
-        }
-    };
-
-    return (
-        <div id={props.id} className={`${Styles.ns_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
-            {
-                values.map((value, index) => (
-                    <input
-                        key={index + 10}
-                        ref={el => inputsRef.current[index] = el}
-                        type="text"
-                        value={value}
-                        onChange={handleChange(index)}
-                        onKeyDown={handleKeyDown(index)}
-                        maxLength={1}
-                        style={{ width: '30px', textAlign: 'center' }}
-                        className={Styles.ns_otp_input}
-                    />
-                ))
-            }
-        </div >
-    );
-};
-
-export default NSBoxOTP;

package/src/components/NSVerification.module.css

@@ -1,23 +0,0 @@
-.ns_verification_container {
-    background-color: #FFF;
-    border: 1px solid #A1A4B0;
-    backdrop-filter: blur(5px);
-    border-radius: 8px;
-    width: 100%;
-    max-width: 594px;
-    padding: 16px;
-    color: #141B5C !important;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: center;
-}
-
-.ns_verification_container p{
-    text-align: center;
-}
-
-.ns_verification_vector{
-    width: 224px;
-    height: 224px;
-}