namirasoft-site-react 1.3.113 → 1.3.115

package/dist/main.d.ts

@@ -1,3 +1,15 @@
+export * from "./components/NSBoxDate";
+export * from "./components/NSBoxDouble";
+export * from "./components/NSBoxDuration";
+export * from "./components/NSBoxEmail";
+export * from "./components/NSBoxErrorNotifier";
+export * from "./components/NSBoxInteger";
+export * from "./components/NSBoxIPV4";
+export * from "./components/NSBoxIPV6";
+export * from "./components/NSBoxPassword";
+export * from "./components/NSBoxPhone";
+export * from "./components/NSBoxPrice";
+export * from "./components/NSBoxString";
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButton";
@@ -5,23 +17,12 @@ export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";
 export * from "./components/NSEntityBar";
-export * from "./components/NSInputErrorNotifier";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSCopyToClipboard";
-export * from "./components/NSInputDate";
-export * from "./components/NSInputDuration";
-export * from "./components/NSInputEmail";
-export * from "./components/NSInputFloat";
-export * from "./components/NSInputIP";
-export * from "./components/NSInputPassword";
-export * from "./components/NSInputInteger";
-export * from "./components/NSInputPhone";
-export * from "./components/NSInputPrice";
-export * from "./components/NSInputSearch";
-export * from "./components/NSInputString";
-export * from "./components/NSInputText";
-export * from "./components/NSInputTime";
+export * from "./components/NSBoxSearch";
+export * from "./components/NSBoxText";
+export * from "./components/NSBoxTime";
 export * from "./components/NSLayout";
 export * from "./components/NSLayoutAction";
 export * from "./components/NSLayoutHeroBanner";

package/dist/main.js

@@ -1,3 +1,15 @@
+export * from "./components/NSBoxDate";
+export * from "./components/NSBoxDouble";
+export * from "./components/NSBoxDuration";
+export * from "./components/NSBoxEmail";
+export * from "./components/NSBoxErrorNotifier";
+export * from "./components/NSBoxInteger";
+export * from "./components/NSBoxIPV4";
+export * from "./components/NSBoxIPV6";
+export * from "./components/NSBoxPassword";
+export * from "./components/NSBoxPhone";
+export * from "./components/NSBoxPrice";
+export * from "./components/NSBoxString";
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButton";
@@ -5,23 +17,12 @@ export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";
 export * from "./components/NSEntityBar";
-export * from "./components/NSInputErrorNotifier";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
 export * from "./components/NSCopyToClipboard";
-export * from "./components/NSInputDate";
-export * from "./components/NSInputDuration";
-export * from "./components/NSInputEmail";
-export * from "./components/NSInputFloat";
-export * from "./components/NSInputIP";
-export * from "./components/NSInputPassword";
-export * from "./components/NSInputInteger";
-export * from "./components/NSInputPhone";
-export * from "./components/NSInputPrice";
-export * from "./components/NSInputSearch";
-export * from "./components/NSInputString";
-export * from "./components/NSInputText";
-export * from "./components/NSInputTime";
+export * from "./components/NSBoxSearch";
+export * from "./components/NSBoxText";
+export * from "./components/NSBoxTime";
 export * from "./components/NSLayout";
 export * from "./components/NSLayoutAction";
 export * from "./components/NSLayoutHeroBanner";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,mCAAmC,CAAC;AAClD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/package.json

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

package/src/App.tsx

@@ -1,8 +1,9 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSTable } from './main';
+import { NSBoxIPV4, NSTable } from './main';
 import { useRef } from 'react';
 import { NSLayoutAction } from './components/NSLayoutAction';
+import { NSBoxIPV6 } from './components/NSBoxIPV6';
 
 const actions = [
 	{
@@ -125,6 +126,16 @@ export function App()
 						onChanged={onChange}
 					/>
 				</div>
+				<NSBoxIPV6
+					title='IPV6'
+					required={false}
+				/>
+				
+				<NSBoxIPV4
+					title='IPV4'
+					required={false}
+				/>
+
 			</NSLayoutAction>
 		</>
 	);

package/src/components/NSBoxDate.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBoxDate.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import { IValidationProps } from "../props/IValidationProps";
+import { Validator } from "../Validator";
+
+export interface INSBoxDateProps extends IBaseComponentProps, IValidationProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxDateState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxDate extends React.Component<INSBoxDateProps, INSBoxDateState>
+{
+	constructor(props: INSBoxDateProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? "" };
+		this.setValue = this.setValue.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorDate(this.props.title, this.state.value)
+		);
+	}
+	getValue(): string
+	{
+		let error = this.getError();
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	setValue(value: string): void
+	{
+		this.setState({ value });
+	}
+	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="date"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+						onClick={() => { }}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxDateTime.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBoxDate.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import { IValidationProps } from "../props/IValidationProps";
+import { Validator } from "../Validator";
+
+export interface INSBoxDateTimeProps extends IBaseComponentProps, IValidationProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxDateTimeState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxDateTime extends React.Component<INSBoxDateTimeProps, INSBoxDateTimeState>
+{
+	constructor(props: INSBoxDateTimeProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? "" };
+		this.setValue = this.setValue.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorDate(this.props.title, this.state.value)
+		);
+	}
+	getValue(): string
+	{
+		let error = this.getError();
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	setValue(value: string): void
+	{
+		this.setState({ value });
+	}
+	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="datetime-local"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+						onClick={() => { }}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxDouble.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputFloat from '../assets/images/icon-input-float.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationNumberProps } from "../props/IValidationNumberProps";
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSBoxDoubleProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps 
+{
+	title: string;
+	defaultValue?: number;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxDoubleState
+{
+	value?: number;
+	error?: string;
+}
+
+export class NSBoxDouble extends React.Component<INSBoxDoubleProps, INSBoxDoubleState>
+{
+	constructor(props: INSBoxDoubleProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue };
+		this.setValue = this.setValue.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorNumber(this.props.title, this.state.value, this.props)
+		);
+	}
+	getValue(): number | undefined
+	{
+		let error = this.getError();
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	setValue(value: number | undefined): void
+	{
+		this.setState({ value });
+	}
+	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(parseFloat(e.target.value));
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<img
+						className={Styles.ns_input_icon}
+						src={IconInputFloat}
+						alt="Flaot Icon"
+						width={24}
+						height={24}
+					/>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="number"
+						inputMode="decimal"
+						//todo: check pattern
+						pattern="[0-9]*[.,]?[0-9]*"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxDuration.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputDuration from '../assets/images/icon-input-duration.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationNumberProps } from "../props/IValidationNumberProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSBoxDurationProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, IValidationNumberProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxDurationState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxDuration extends React.Component<INSBoxDurationProps, INSBoxDurationState>
+{
+	constructor(props: INSBoxDurationProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? "" };
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorDuration(this.props.title, this.state.value)
+		);
+	}
+	getValue(): string
+	{
+		let error = this.getError();
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	setValue(value: string): void
+	{
+		this.setState({ value });
+	}
+	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<img
+						className={Styles.ns_input_icon}
+						src={IconInputDuration}
+						alt="Duration Icon"
+						width={24}
+						height={24}
+					/>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="time"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+						step="2"
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxEmail.tsx

@@ -0,0 +1,90 @@
+"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";
+
+export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxEmailState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState>
+{
+	constructor(props: INSBoxEmailProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? "" };
+		this.setValue = this.setValue.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorString(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorEmail(this.props.title, this.state.value)
+		);
+	}
+	getValue(): string
+	{
+		let error = this.getError();
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	setValue(value: string): void
+	{
+		this.setState({ value });
+	}
+	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<img
+						className={Styles.ns_input_icon}
+						src={IconInputEmail}
+						alt="Email Icon"
+						width={24}
+						height={24}
+					/>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="email"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxEntity.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+import type { SelectProps } from 'antd';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { NSSelectBox } from "./NSSelectBox";
+
+export interface INSBoxEntityProps extends IBaseComponentProps, IValidationProps
+{
+	title: string;
+	options: SelectProps['options'];
+	multiple: boolean;
+}
+
+export class NSBoxEntity extends React.Component<INSBoxEntityProps>
+{
+	override render(): React.ReactNode
+	{
+		return (
+			<NSSelectBox
+				placeHolder="Entity Box"
+				title={this.props.title}
+				multiple={false}
+				options={this.props.options}
+				required={false}
+			/>
+		)
+	}
+}

package/src/components/NSBoxEnum.tsx

@@ -0,0 +1,54 @@
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { NSSelectBox } from "./NSSelectBox";
+
+const options  = [
+	{ 
+		date: { 
+			desc : "test"
+		},
+	}, 
+	{ 
+		date: { 
+			desc : "test"
+		},
+	}, 
+	{ 
+		date: { 
+			desc : "test"
+		},
+	}, 
+	{ 
+		date: { 
+			desc : "test"
+		},
+	}, 
+	{ 
+		date: { 
+			desc : "test"
+		},
+	}, 
+	{ 
+		date: { 
+			desc : "test"
+		},
+	}, 
+]
+export interface INSBoxEnumProps extends IBaseComponentProps, IValidationProps
+{
+	title: string;
+	multiple: boolean;
+}
+
+export function NSBoxEnum(props: INSBoxEnumProps)
+{
+	return (
+		<NSSelectBox
+			placeHolder="Enum Box"
+			title={props.title}
+			multiple={false}
+			options={options}
+			required={false}
+		/>
+	)
+}

package/src/components/NSBoxErrorNotifier.tsx

@@ -0,0 +1,28 @@
+import Styles from "./NSBoxErrorNotifier.module.css";
+import Danger from '../assets/images/danger.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSBoxErrorNotifierProps extends IBaseComponentProps
+{
+	error?: string;
+}
+
+export function NSBoxErrorNotifier(props: INSBoxErrorNotifierProps)
+{
+	return <>
+		{
+			props.error && (
+				<div className="d-flex justify-content-start align-items-center gap-2 ms-2">
+					<img
+						className={""}
+						src={Danger}
+						alt="Error Icon"
+						width={13}
+						height={13}
+					/>
+					<span className={Styles.ns_input_error}>{props.error}</span>
+				</div >
+			)
+		}
+	</>;
+}