namirasoft-site-react 1.4.236 → 1.4.237

package/dist/components/NSBoxURL.d.ts

@@ -5,6 +5,7 @@ import { IValidationStringProps } from "../props/IValidationStringProps";
 import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 export interface NSBoxURLProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxURL> {
+    input?: IBaseComponentProps;
 }
 export interface NSBoxURLState {
     value: string | null;

package/dist/components/NSBoxURL.js

@@ -36,13 +36,11 @@ export class NSBoxURL extends React.Component {
         });
     }
     render() {
+        var _a, _b, _c, _d, _e;
         let menu = safeMenuMenuItem(this.props, () => { });
         menu.builtin.copy = { enabled: true, getValue: () => { var _a; return (_a = this.state.value) !== null && _a !== void 0 ? _a : ""; } };
         menu.builtin.fullscreen = { enabled: true, getValue: () => { var _a; return (_a = this.state.value) !== null && _a !== void 0 ? _a : ""; }, setValue: this.setValue };
-        return (_jsx(NSBoxBaseLayout, Object.assign({ ref: this.NSBoxBaseLayout_Main }, this.props, { menu: menu, children: _jsx("div", { id: this.props.id, className: StylesNSBox.ns_box_input, style: {
-                    background: `url("https://static.namirasoft.com/image/concept/type/url.png") white no-repeat scroll center right 4px`,
-                    backgroundSize: "24px"
-                }, children: "Not implemented" }) })));
+        return (_jsx(NSBoxBaseLayout, Object.assign({ ref: this.NSBoxBaseLayout_Main }, this.props, { menu: menu, children: _jsx("div", { id: (_a = this.props.input) === null || _a === void 0 ? void 0 : _a.id, className: `${StylesNSBox.ns_box_input} ${(_d = (_c = (_b = this.props.input) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.join(" ")) !== null && _d !== void 0 ? _d : ""}`, style: Object.assign({ background: `url("https://static.namirasoft.com/image/concept/type/url.png") white no-repeat scroll center right 4px`, backgroundSize: "24px" }, (_e = this.props.input) === null || _e === void 0 ? void 0 : _e.style), children: "Not implemented" }) })));
     }
 }
 //# sourceMappingURL=NSBoxURL.js.map

package/dist/components/NSBoxURL.js.map

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

package/dist/components/NSBoxVersion.d.ts

@@ -5,6 +5,7 @@ import { IValidationStringProps } from "../props/IValidationStringProps";
 import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 export interface NSBoxVersionProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxVersion> {
+    input?: IBaseComponentProps;
 }
 export interface NSBoxVersionState {
     value: string | null;

package/dist/components/NSBoxVersion.js

@@ -36,12 +36,10 @@ export class NSBoxVersion extends React.Component {
         });
     }
     render() {
+        var _a, _b, _c, _d, _e;
         let menu = safeMenuMenuItem(this.props, () => { });
         menu.builtin.copy = { enabled: true, getValue: () => { var _a; return (_a = this.state.value) !== null && _a !== void 0 ? _a : ""; } };
-        return (_jsx(NSBoxBaseLayout, Object.assign({ ref: this.NSBoxBaseLayout_Main }, this.props, { menu: menu, children: _jsx("div", { id: this.props.id, className: StylesNSBox.ns_box_input, style: {
-                    background: `url("https://static.namirasoft.com/image/concept/type/version.png") white no-repeat scroll center right 4px`,
-                    backgroundSize: "24px"
-                }, children: "Not implemented" }) })));
+        return (_jsx(NSBoxBaseLayout, Object.assign({ ref: this.NSBoxBaseLayout_Main }, this.props, { menu: menu, children: _jsx("div", { id: (_a = this.props.input) === null || _a === void 0 ? void 0 : _a.id, className: `${StylesNSBox.ns_box_input} ${(_d = (_c = (_b = this.props.input) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.join(" ")) !== null && _d !== void 0 ? _d : ""}`, style: Object.assign({ background: `url("https://static.namirasoft.com/image/concept/type/version.png") white no-repeat scroll center right 4px`, backgroundSize: "24px" }, (_e = this.props.input) === null || _e === void 0 ? void 0 : _e.style), children: "Not implemented" }) })));
     }
 }
 //# sourceMappingURL=NSBoxVersion.js.map

package/dist/components/NSBoxVersion.js.map

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

package/package.json

@@ -8,7 +8,7 @@
 	"framework": "npm",
 	"application": "package",
 	"private": false,
-	"version": "1.4.236",
+	"version": "1.4.237",
 	"author": "Amir Abolhasani",
 	"license": "MIT",
 	"main": "./dist/main.js",

package/src/components/NSBoxBaseLayout.tsx

@@ -59,13 +59,10 @@ export class NSBoxBaseLayout extends React.Component<NSBoxBaseLayoutProps, NSBox
 	}
 	override render()
 	{
-		let id = undefined;
-		if (this.props.id)
-			id = this.props.id + "_parent";
 		return (
 			<>
 				<div
-					id={id}
+					id={this.props.id}
 					className={`${StylesNSBox.ns_box_input_parent} ${this.props.classList?.join(" ") ?? ""}`}
 					style={this.props.style}
 					onKeyUp={e =>

package/src/components/NSBoxBoolean.tsx

@@ -12,6 +12,7 @@ import { INSBox } from "./INSBox";
 export interface NSBoxBooleanProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<boolean, NSBoxBoolean>
 {
 	checked?: (boolean | null);
+	input?: IBaseComponentProps;
 }
 
 export interface NSBoxBooleanState
@@ -100,13 +101,14 @@ export class NSBoxBoolean extends React.Component<NSBoxBooleanProps, NSBoxBoolea
 					htmlFor={this.props.name}
 				>
 					<input
-						id={this.props.id}
-						name={this.props.name}
+						id={this.props.input?.id}
+						name={this.props.input?.name}
 						type="checkbox"
-						className={`${Styles.ns_box_boolean_input} ${this.state.value == null ? Styles.ns_box_boolean_indeterminate : ""}`}
+						className={`${Styles.ns_box_boolean_input} ${this.state.value == null ? Styles.ns_box_boolean_indeterminate : ""}  ${this.props.input?.classList?.join(" ") ?? ""}`}
 						checked={this.state.value ?? false}
 						onChange={e => this.setValue(e.target.checked)}
 						onClick={() => { this.props.onClicked?.(this); }}
+						style={this.props.input?.style}
 					/>
 					<span style={{ width: "0px" }}></span>
 					{this.props.hideHeader && this.props.required && <span style={{ color: "red" }}>*</span>}

package/src/components/NSBoxColor.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxColorProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxColor>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxColorState
 {
@@ -67,17 +69,18 @@ export class NSBoxColor extends React.Component<NSBoxColorProps, NSBoxColorState
 				menu={menu}
 			>
 				<div
-					id={this.props.id}
-					// name={this.props.name}
+					id={this.props.input?.id}
+					// name={this.props.input?.name}
 					// type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					// placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					// value={this.state.value ?? ""}
 					// onChange={e => this.setValue(e.target.value)}
 					// onClick={() => { this.props.onClicked?.(this); }}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/color.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxCombo.tsx

@@ -9,6 +9,7 @@ import { INSBox } from "./INSBox";
 export interface NSBoxComboProps extends IBaseComponentProps, IValidationProps, INSBoxBaseComboProps<NSBoxCombo>
 {
 	getOptions: () => NSBoxBaseComboOption[];
+	input?: IBaseComponentProps;
 }
 
 export class NSBoxCombo extends React.Component<NSBoxComboProps> implements INSBox

package/src/components/NSBoxDate.tsx

@@ -12,7 +12,9 @@ import { NamingConvention } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxDateProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<string, NSBoxDate>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxDateState
 {
@@ -68,10 +70,10 @@ export class NSBoxDate extends React.Component<NSBoxDateProps, NSBoxDateState> i
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="date"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(e.target.value)}
@@ -79,7 +81,8 @@ export class NSBoxDate extends React.Component<NSBoxDateProps, NSBoxDateState> i
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/date.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",
-						paddingRight: "8px"
+						paddingRight: "8px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxDateTime.tsx

@@ -12,7 +12,9 @@ import { NamingConvention } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxDateTimeProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<Date, NSBoxDateTime>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxDateTimeState
 {
@@ -83,10 +85,10 @@ export class NSBoxDateTime extends React.Component<NSBoxDateTimeProps, NSBoxDate
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="datetime-local"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={getFormattedValue(this.state.value)}
 					onChange={e => this.setValue(e.target.value)}
@@ -94,7 +96,8 @@ export class NSBoxDateTime extends React.Component<NSBoxDateTimeProps, NSBoxDate
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/date-time.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",
-						paddingRight: "8px"
+						paddingRight: "8px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxDouble.tsx

@@ -13,7 +13,9 @@ import { IValidationPrecisionProps } from "../props/IValidationPrecisionProps";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxDoubleProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps, IValidationPrecisionProps, INSBoxBaseLayoutProps<number, NSBoxDouble>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxDoubleState
 {
@@ -69,10 +71,10 @@ export class NSBoxDouble extends React.Component<NSBoxDoubleProps, NSBoxDoubleSt
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="number"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(parseFloat(e.target.value))}
@@ -83,7 +85,8 @@ export class NSBoxDouble extends React.Component<NSBoxDoubleProps, NSBoxDoubleSt
 					pattern={"[0-9]*[.,]?[0-9]" + (this.props.precision ? `{0,${this.props.precision}}` : "*")}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/float.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxDuration.tsx

@@ -14,7 +14,9 @@ import { NamingConvention } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxDurationProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, IValidationNumberProps, INSBoxBaseLayoutProps<string, NSBoxDuration>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxDurationState
 {
@@ -72,10 +74,10 @@ export class NSBoxDuration extends React.Component<NSBoxDurationProps, NSBoxDura
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="time"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(e.target.value)}
@@ -84,7 +86,8 @@ export class NSBoxDuration extends React.Component<NSBoxDurationProps, NSBoxDura
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/duration.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",
-						paddingRight: "7px"
+						paddingRight: "7px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxDynamic.tsx

@@ -10,11 +10,11 @@ import { INSBox } from "./INSBox";
 export interface NSBoxDynamicProps extends IBaseComponentProps, INSBoxBaseLayoutProps<string, NSBoxDynamic>
 {
 	variable: BaseVariableSchema;
+	input?: IBaseComponentProps;
 }
 
 export interface NSBoxDynamicState
-{
-}
+{ }
 
 export class NSBoxDynamic extends React.Component<NSBoxDynamicProps, NSBoxDynamicState> implements INSBox
 {

package/src/components/NSBoxEmail.tsx

@@ -12,6 +12,7 @@ import { INSBox } from "./INSBox";
 
 export interface NSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxEmail>
 {
+	input?: IBaseComponentProps;
 }
 
 export interface NSBoxEmailState
@@ -78,17 +79,18 @@ export class NSBoxEmail extends React.Component<NSBoxEmailProps, NSBoxEmailState
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="email"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(e.target.value)}
 					onClick={() => { this.props.onClicked?.(this); }}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/email.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxEntity.tsx

@@ -3,9 +3,12 @@
 import React, { createRef } from "react";
 import { NSBoxBaseCombo, NSBoxBaseComboProps } from "../components/NSBoxBaseCombo";
 import { INSBox } from "./INSBox";
+import { IBaseComponentProps } from "../main";
 
 export interface NSBoxEntityProps<Data> extends NSBoxBaseComboProps<Data, NSBoxEntity<Data>>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export class NSBoxEntity<Data> extends React.Component<NSBoxEntityProps<Data>> implements INSBox
 {

package/src/components/NSBoxEnum.tsx

@@ -10,6 +10,7 @@ import { INSBox } from "./INSBox";
 interface NSBoxEnumProps<Data> extends IBaseComponentProps, IValidationProps, INSBoxBaseComboProps<NSBoxEnum<Data>>
 {
 	getEnumObject: () => { [s: string]: Data };
+	input?: IBaseComponentProps;
 }
 
 export class NSBoxEnum<Data> extends React.Component<NSBoxEnumProps<Data>> implements INSBox

package/src/components/NSBoxFilePath.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxFilePathProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxFilePath>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxFilePathState
 {
@@ -67,17 +69,18 @@ export class NSBoxFilePath extends React.Component<NSBoxFilePathProps, NSBoxFile
 				menu={menu}
 			>
 				<div
-					id={this.props.id}
-					// name={this.props.name}
+					id={this.props.input?.id}
+					// name={this.props.input?.name}
 					// type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					// placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					// value={this.state.value ?? ""}
 					// onChange={e => this.setValue(e.target.value)}
 					// onClick={() => { this.props.onClicked?.(this); }}
 					style={{
 						background: `FilePath("https://static.namirasoft.com/image/concept/type/file-path.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxFont.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxFontProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxFont>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxFontState
 {
@@ -67,17 +69,18 @@ export class NSBoxFont extends React.Component<NSBoxFontProps, NSBoxFontState> i
 				menu={menu}
 			>
 				<div
-					id={this.props.id}
-					// name={this.props.name}
+					id={this.props.input?.id}
+					// name={this.props.input?.name}
 					// type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					// placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					// value={this.state.value ?? ""}
 					// onChange={e => this.setValue(e.target.value)}
 					// onClick={() => { this.props.onClicked?.(this); }}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/font.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxIPV4.tsx

@@ -13,7 +13,9 @@ import { NamingConvention } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxIPV4Props extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxIPV4>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxIPV4State
 {
@@ -70,10 +72,10 @@ export class NSBoxIPV4 extends React.Component<NSBoxIPV4Props, NSBoxIPV4State> i
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(e.target.value)}
@@ -84,7 +86,8 @@ export class NSBoxIPV4 extends React.Component<NSBoxIPV4Props, NSBoxIPV4State> i
 					pattern={IPV4Schema.REGEX + ""}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/ipv4%266.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxIPV4Range.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxIPV4RangeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxIPV4Range>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxIPV4RangeState
 {
@@ -67,17 +69,18 @@ export class NSBoxIPV4Range extends React.Component<NSBoxIPV4RangeProps, NSBoxIP
 				menu={menu}
 			>
 				<div
-					id={this.props.id}
-					// name={this.props.name}
+					id={this.props.input?.id}
+					// name={this.props.input?.name}
 					// type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					// placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					// value={this.state.value ?? ""}
 					// onChange={e => this.setValue(e.target.value)}
 					// onClick={() => { this.props.onClicked?.(this); }}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/ip-range.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxIPV6.tsx

@@ -13,7 +13,9 @@ import { NamingConvention } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxIPV6Props extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxIPV6>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxIPV6State
 {
@@ -70,10 +72,10 @@ export class NSBoxIPV6 extends React.Component<NSBoxIPV6Props, NSBoxIPV6State> i
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(e.target.value)}
@@ -81,7 +83,8 @@ export class NSBoxIPV6 extends React.Component<NSBoxIPV6Props, NSBoxIPV6State> i
 					pattern={IPV6Schema.REGEX + ""}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/ipv4%266.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxIPV6Range.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxIPV6RangeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxIPV6Range>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxIPV6RangeState
 {
@@ -67,17 +69,18 @@ export class NSBoxIPV6Range extends React.Component<NSBoxIPV6RangeProps, NSBoxIP
 				menu={menu}
 			>
 				<div
-					id={this.props.id}
-					// name={this.props.name}
+					id={this.props.input?.id}
+					// name={this.props.input?.name}
 					// type="text"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					// placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					// value={this.state.value ?? ""}
 					// // onChange={e => this.setValue(e.target.value)}
 					// onClick={() => { this.props.onClicked?.(this); }}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/ip-range.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxInteger.tsx

@@ -13,6 +13,7 @@ import { INSBox } from "./INSBox";
 
 export interface NSBoxIntegerProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps, INSBoxBaseLayoutProps<number, NSBoxInteger>
 {
+	input?: IBaseComponentProps;
 }
 
 export interface NSBoxIntegerState
@@ -69,10 +70,10 @@ export class NSBoxInteger extends React.Component<NSBoxIntegerProps, NSBoxIntege
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type="number"
-					className={StylesNSBox.ns_box_input}
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(parseInt(e.target.value))}
@@ -81,7 +82,8 @@ export class NSBoxInteger extends React.Component<NSBoxIntegerProps, NSBoxIntege
 					max={this.props.max}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/integer.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>