namirasoft-site-react 1.4.236 → 1.4.237

package/src/components/NSBoxMoney.tsx

@@ -13,7 +13,9 @@ import { IValidationPrecisionProps } from "../props/IValidationPrecisionProps";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxMoneyProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps, IValidationPrecisionProps, INSBoxBaseLayoutProps<number, NSBoxMoney>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxMoneyState
 {
@@ -69,10 +71,10 @@ export class NSBoxMoney extends React.Component<NSBoxMoneyProps, NSBoxMoneyState
 				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))}
@@ -84,7 +86,8 @@ export class NSBoxMoney extends React.Component<NSBoxMoneyProps, NSBoxMoneyState
 					step="0.01"
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/price.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxPassword.tsx

@@ -12,7 +12,9 @@ import { NamingConvention, SetTimeouService } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxPasswordProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxPassword>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxPasswordState 
 {
@@ -85,17 +87,18 @@ export class NSBoxPassword extends React.Component<NSBoxPasswordProps, NSBoxPass
 				menu={menu}
 			>
 				<input
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.input?.id}
+					name={this.props.input?.name}
 					type={this.state.show ? "text" : "password"}
-					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/password.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxRadio.tsx

@@ -11,6 +11,7 @@ import { INSBox } from "./INSBox";
 export interface NSBoxRadioProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<boolean, NSBoxRadio>
 {
 	checked?: boolean;
+	input?: IBaseComponentProps;
 }
 
 export interface NSBoxRadioState
@@ -70,15 +71,16 @@ export class NSBoxRadio extends React.Component<NSBoxRadioProps, NSBoxRadioState
 				title=""
 				menu={menu}
 			>
-				<label className={`ns-font-16-normal ${Styles.ns_box_radio_label}`} htmlFor={this.props.name}>
+				<label className={`ns-font-16-normal ${Styles.ns_box_radio_label}`} htmlFor={this.props.input?.name}>
 					<input
-						id={this.props.id}
-						name={this.props.name}
+						id={this.props.input?.id}
+						name={this.props.input?.name}
 						type="radio"
-						className={Styles.ns_box_radio_input}
+						className={`${Styles.ns_box_radio_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
 						checked={this.state.value}
 						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/NSBoxSearch.tsx

@@ -18,6 +18,7 @@ export interface NSBoxSearchProps extends IBaseComponentProps, IValidationProps,
 	hideHeader?: boolean;
 	onChanged?: (e: NSBoxSearch, callback?: () => void) => void;
 	onClicked?: (e: NSBoxSearch) => void;
+	input?: IBaseComponentProps;
 }
 
 export interface NSBoxSearchState 
@@ -77,10 +78,10 @@ export class NSBoxSearch extends React.Component<NSBoxSearchProps, NSBoxSearchSt
 			>
 				<input
 					ref={this.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)}
@@ -88,6 +89,7 @@ export class NSBoxSearch extends React.Component<NSBoxSearchProps, NSBoxSearchSt
 					style={{
 						background: `url(${"https://static.namirasoft.com/image/concept/search/blue.svg"}) white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxString.tsx

@@ -11,7 +11,9 @@ import { INSBox } from "./INSBox";
 import { safeMenuMenuItem } from "./NSMenuButton";
 
 export interface NSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxString>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxStringState 
 {
@@ -68,10 +70,10 @@ export class NSBoxString extends React.Component<NSBoxStringProps, NSBoxStringSt
 				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)}
@@ -80,7 +82,8 @@ export class NSBoxString extends React.Component<NSBoxStringProps, NSBoxStringSt
 					maxLength={this.props.max_length}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/string.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxTextArea.tsx

@@ -15,6 +15,7 @@ export interface NSBoxTextAreaProps extends IBaseComponentProps, IValidationProp
 {
 	cols?: number;
 	rows?: number;
+	textarea?: IBaseComponentProps;
 }
 
 export interface NSBoxTextAreaState
@@ -75,12 +76,12 @@ export class NSBoxTextArea extends React.Component<NSBoxTextAreaProps, NSBoxText
 			>
 				<textarea
 					ref={this.textarea}
-					id={this.props.id}
-					name={this.props.name}
+					id={this.props.textarea?.id}
+					name={this.props.textarea?.name}
 					cols={this.props.cols}
 					rows={this.props.rows ?? 5}
 					value={this.state.value ?? ""}
-					className={Styles.ns_box_text_area}
+					className={`${Styles.ns_box_text_area} ${this.props.textarea?.classList?.join(" ") ?? ""}`}
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					onChange={e => this.setValue(e.target.value)}
 					onClick={() => { this.props.onClicked?.(this); }}
@@ -88,7 +89,8 @@ export class NSBoxTextArea extends React.Component<NSBoxTextAreaProps, NSBoxText
 						height: "100%",
 						background: `url("https://static.namirasoft.com/image/concept/type/string.png") white no-repeat scroll top right 4px `,
 						backgroundPositionY: "4px",
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.textarea?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxTime.tsx

@@ -13,7 +13,9 @@ import { NamingConvention } from "namirasoft-core";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxTimeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxTime>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxTimeState
 {
@@ -70,10 +72,10 @@ export class NSBoxTime extends React.Component<NSBoxTimeProps, NSBoxTimeState> i
 				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)}
@@ -82,7 +84,8 @@ export class NSBoxTime extends React.Component<NSBoxTimeProps, NSBoxTimeState> i
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/time.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",
-						paddingRight: "7px"
+						paddingRight: "7px",
+						...this.props.input?.style
 					}}
 				/>
 			</NSBoxBaseLayout>

package/src/components/NSBoxTimeZone.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxTimeZoneProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxTimeZone>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxTimeZoneState
 {
@@ -67,17 +69,18 @@ export class NSBoxTimeZone extends React.Component<NSBoxTimeZoneProps, NSBoxTime
 				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/timezone.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxURL.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxURLProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxURL>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxURLState
 {
@@ -68,17 +70,18 @@ export class NSBoxURL extends React.Component<NSBoxURLProps, NSBoxURLState> impl
 				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/url.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented

package/src/components/NSBoxVersion.tsx

@@ -11,7 +11,9 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 
 export interface NSBoxVersionProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<string, NSBoxVersion>
-{ }
+{
+	input?: IBaseComponentProps;
+}
 
 export interface NSBoxVersionState
 {
@@ -67,17 +69,18 @@ export class NSBoxVersion extends React.Component<NSBoxVersionProps, NSBoxVersio
 				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/version.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px"
+						backgroundSize: "24px",
+						...this.props.input?.style
 					}}
 				>
 					Not implemented