namirasoft-site-react 1.3.55 → 1.3.57

package/dist/App.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable } from './main';
+import { NSFooter, NSHeader, NSTable, NSInputDate } from './main';
 export function App() {
     let columns = {
         "id": "ID",
@@ -28,6 +28,6 @@ export function App() {
             status: "Done"
         }
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/logo/namirasoft/base.png', account: false, background: { color: "transparent !important" } }), _jsx("div", { className: "container", children: _jsx(NSTable, { columns: columns, rows: rows, getRowKey: row => row.id.toString() }) }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/logo/namirasoft/base.png' })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/logo/namirasoft/base.png', account: false, background: { color: "transparent !important" } }), _jsxs("div", { className: "container", children: [_jsx(NSInputDate, { title: "rrt" }), _jsx(NSTable, { columns: columns, rows: rows, getRowKey: row => row.id.toString() })] }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/logo/namirasoft/base.png' })] }));
 }
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErD,MAAM,UAAU,GAAG;IAEf,IAAI,OAAO,GAAG;QACV,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACR,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;QACD;YACI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;KACA,CAAA;IAUD,OAAO,CACH,8BACI,KAAC,QAAQ,IACL,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,wDAAwD,EAC7D,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,GACjD,EACF,cAAK,SAAS,EAAC,WAAW,YACtB,KAAC,OAAO,IAAM,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,GACjF,EACN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,wDAAwD,GAAG,IAC7H,CACN,CAAC;AACN,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,WAAW,EAAE,MAAM,QAAQ,CAAC;AAEjE,MAAM,UAAU,GAAG;IAEf,IAAI,OAAO,GAAG;QACV,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACR,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;QACD;YACI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;KACA,CAAA;IAUD,OAAO,CACH,8BACI,KAAC,QAAQ,IACL,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,wDAAwD,EAC7D,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,GACjD,EACF,eAAK,SAAS,EAAC,WAAW,aACtB,KAAC,WAAW,IAAC,KAAK,EAAC,KAAK,GAAE,EAC1B,KAAC,OAAO,IAAM,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,IACjF,EACN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,wDAAwD,GAAG,IAC7H,CACN,CAAC;AACN,CAAC"}

package/dist/components/NSInputDate.js

@@ -25,7 +25,7 @@ export class NSInputDate extends React.Component {
     }
     render() {
         var _a;
-        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "date", className: Styles.ns_input, placeholder: this.props.placeholder, id: "ns-input-date" })] }));
+        return (_jsxs("div", { className: `${Styles.ns_parent_input} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "date", className: Styles.ns_input, placeholder: this.props.placeholder, id: "ns-input-date" })] }));
     }
 }
 //# sourceMappingURL=NSInputDate.js.map

package/dist/components/NSInputDate.module.css

@@ -25,12 +25,3 @@
 	font-weight: 400;
 }
 
-.ns_input::-webkit-calendar-picker-indicator {
-	display: block;
-	background: url(../assets/images/icon-input-date.svg) no-repeat;
-	width: 24px;
-	height: 24px;
-	position: relative;
-	top: 3px;
-	left: 4px;
-}

package/dist/components/NSInputPassword.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { BaseComponentProps } from "../props/BaseComponentProps";
+export interface NSInputPasswordProps extends BaseComponentProps {
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}
+export interface NSInputPasswordState {
+    value: string;
+}
+export declare class NSInputPassword extends React.Component<NSInputPasswordProps, NSInputPasswordState> {
+    constructor(props: NSInputPasswordProps);
+    getValue(): string;
+    setValue(value: string): void;
+    private onChanged;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/NSInputPassword.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSInputPassword.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
+export class NSInputPassword extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.state = {
+            value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
+        };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+    }
+    getValue() {
+        return this.state.value;
+    }
+    setValue(value) {
+        this.setState({ value });
+    }
+    onChanged(e) {
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+    }
+    render() {
+        var _a;
+        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputString, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "password", className: Styles.ns_input, placeholder: this.props.placeholder })] }));
+    }
+}
+//# sourceMappingURL=NSInputPassword.js.map

package/dist/components/NSInputPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSInputPassword.js","sourceRoot":"","sources":["../../src/components/NSInputPassword.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAClD,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAgBrE,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAqD;IAE5F,YAAY,KAA2B;;QAEnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;SAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,QAAQ,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAEvG,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GACrC,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputPassword.module.css

@@ -0,0 +1,27 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/dist/main.d.ts

@@ -14,6 +14,7 @@ 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";

package/dist/main.js

@@ -14,6 +14,7 @@ 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";

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,iCAAiC,CAAC;AAChD,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,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,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,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,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,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,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,0BAA0B,CAAC;AACzC,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,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,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,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.55",
+    "version": "1.3.57",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -30,7 +30,7 @@
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.3.1",
         "namirasoft-core": "^1.3.18",
-        "namirasoft-site-react": "^1.3.54",
+        "namirasoft-site-react": "^1.3.56",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",

package/src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSFooter, NSHeader, NSTable } from './main';
+import { NSFooter, NSHeader, NSTable,NSInputDate } from './main';
 
 export function App()
 {
@@ -48,6 +48,7 @@ export function App()
                 background={{ color: "transparent !important" }}
             />
             <div className="container">
+                <NSInputDate title="rrt"/>
                 <NSTable<Row> columns={columns} rows={rows} getRowKey={row => row.id.toString()} />
             </div>
             <NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/logo/namirasoft/base.png' />

package/src/components/NSInputDate.module.css

@@ -25,12 +25,3 @@
 	font-weight: 400;
 }
 
-.ns_input::-webkit-calendar-picker-indicator {
-	display: block;
-	background: url(../assets/images/icon-input-date.svg) no-repeat;
-	width: 24px;
-	height: 24px;
-	position: relative;
-	top: 3px;
-	left: 4px;
-}

package/src/components/NSInputDate.tsx

@@ -45,7 +45,7 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+            <div className={`${Styles.ns_parent_input} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
                 <span className={Styles.ns_input_title}>{this.props.title}</span>
                 <input
                     value={this.state.value}

package/src/components/NSInputPassword.module.css

@@ -0,0 +1,27 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputPassword.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSInputPassword.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+
+export interface NSInputPasswordProps extends BaseComponentProps
+{
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}
+
+export interface NSInputPasswordState 
+{
+    value: string;
+}
+
+export class NSInputPassword extends React.Component<NSInputPasswordProps, NSInputPasswordState>
+{
+    constructor(props: NSInputPasswordProps)
+    {
+        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);
+    }
+    getValue(): string
+    {
+        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.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputString}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.onChanged}
+                    type="password"
+                    className={Styles.ns_input}
+                    placeholder={this.props.placeholder}
+                />
+            </div>
+        );
+    }
+}

package/src/main.ts

@@ -14,6 +14,7 @@ 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";