namirasoft-site-react 1.3.191 → 1.3.192

package/dist/App.js

@@ -1,7 +1,7 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayout } from './main';
+import { NSBoxEmail, NSBoxPhone, NSLayout } from './main';
 export function App() {
     const onClicked = () => {
         console.log("clicked");
@@ -18,6 +18,6 @@ export function App() {
     return (_jsx(_Fragment, { children: _jsx(NSLayout, { header: {
                 title: "any",
                 icons: icons
-            }, scope: "exampleScope", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsx(_Fragment, {}) }) }));
+            }, scope: "exampleScope", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsxs(_Fragment, { children: [_jsx(NSBoxEmail, { title: 'test', required: true }), _jsx(NSBoxPhone, { title: 'test', required: true })] }) }) }));
 }
 //# 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,MAAM,QAAQ,CAAC;AAElC,MAAM,UAAU,GAAG;IAGlB,MAAM,SAAS,GAAG,GAAG,EAAE;QAEtB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,IAAI,KAAK,GAAG;QACX,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE;QACrG,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;KAC3F,CAAC;IAEF,OAAO,CACN,4BACC,KAAC,QAAQ,IACR,MAAM,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK;aACZ,EACD,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,gBAAgB,EACrB,aAAa,EAAE,EAAE,EACjB,UAAU,EAAC,EAAE,YAEb,mBAAK,GACK,GACT,CACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE1D,MAAM,UAAU,GAAG;IAGlB,MAAM,SAAS,GAAG,GAAG,EAAE;QAEtB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,IAAI,KAAK,GAAG;QACX,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE;QACrG,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;KAC3F,CAAC;IAEF,OAAO,CACN,4BACC,KAAC,QAAQ,IACR,MAAM,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK;aACZ,EACD,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,gBAAgB,EACrB,aAAa,EAAE,EAAE,EACjB,UAAU,EAAC,EAAE,YAEb,8BACA,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAG,EACzC,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,IACzC,GACO,GACT,CACH,CAAC;AACH,CAAC"}

package/dist/CopyToClipboard.d.ts

@@ -0,0 +1,3 @@
+export default class CopyToClipboard {
+    static copyToClipboard(value: string): void;
+}

package/dist/CopyToClipboard.js

@@ -0,0 +1,7 @@
+export default class CopyToClipboard {
+    static copyToClipboard(value) {
+        navigator.clipboard.writeText(value);
+    }
+}
+;
+//# sourceMappingURL=CopyToClipboard.js.map

package/dist/CopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboard.js","sourceRoot":"","sources":["../src/CopyToClipboard.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,eAAe;IAEhC,MAAM,CAAC,eAAe,CAAC,KAAa;QAEhC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;CACJ;AAAA,CAAC"}

package/dist/components/NSActionMenu.js

@@ -23,7 +23,7 @@ export function NSActionMenu(props) {
     if (props.items.length == 1)
         return _jsx(NSButtonBlue, { title: props.items[0].menu_item, onClick: props.items[0].handler });
     return (_jsxs("div", { className: Styles.ns_action_bar, ref: menuRef, children: [_jsxs("button", { onClick: () => setState((prevState) => (Object.assign(Object.assign({}, prevState), { isShow: !state.isShow }))), children: [props.name, _jsx("img", { className: Styles.ns_action_menu_icon, src: "https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.png", alt: "Icon", width: 8, height: 24 })] }), _jsx("ul", { className: `${Styles.ns_action_item_holder} ${state.isShow ? Styles.ns_show : Styles.ns_hide}`, children: props.items.map((item) => _jsx("li", { onClick: item.handler, className: `${Styles.ns_action_item}
-								${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
-								`, children: item.menu_item }, item.id)) })] }));
+                                ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
+                                `, children: item.menu_item }, item.id)) })] }));
 }
 //# sourceMappingURL=NSActionMenu.js.map

package/dist/components/NSActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSActionMenu.js","sourceRoot":"","sources":["../../src/components/NSActionMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAe/C,MAAM,UAAU,YAAY,CAAC,KAAoD;IAEhF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACtD,MAAM,EAAE,KAAK;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QAEd,SAAS,kBAAkB,CAAC,KAAiB;YAE5C,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACtE;gBACC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aAC5B;QACF,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YAEX,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC;QAC1B,OAAO,mBAAK,CAAC;IACd,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC;QAC1B,OAAO,KAAC,YAAY,IACnB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,CAAC;IACJ,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,aACjD,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC3C,SAAS,KAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAClC,CAAC,aACD,KAAK,CAAC,IAAI,EACX,cACC,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,GAAG,EAAC,wEAAwE,EAC5E,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,EAAE,GACT,IACM,EACT,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAEhG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACxB,aAEC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc;UAChC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;SAClE,YAED,IAAI,CAAC,SAAS,IANV,IAAI,CAAC,EAAE,CAOR,CACL,GAEE,IACA,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSActionMenu.js","sourceRoot":"","sources":["../../src/components/NSActionMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAa/C,MAAM,UAAU,YAAY,CAAC,KAAoD;IAEhF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACtD,MAAM,EAAE,KAAK;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QAEd,SAAS,kBAAkB,CAAC,KAAiB;YAE5C,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACtE;gBACC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aAC5B;QACF,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YAEX,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC;QAC1B,OAAO,mBAAK,CAAC;IACd,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC;QAC1B,OAAO,KAAC,YAAY,IACnB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,CAAC;IACJ,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,aACjD,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC3C,SAAS,KAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAClC,CAAC,aACD,KAAK,CAAC,IAAI,EACX,cACC,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,GAAG,EAAC,wEAAwE,EAC5E,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,EAAE,GACT,IACM,EACT,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAEhG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACxB,aAEC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc;kCACR,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;iCAClE,YAEzB,IAAI,CAAC,SAAS,IANV,IAAI,CAAC,EAAE,CAOR,CACL,GAEE,IACA,CACN,CAAC;AACH,CAAC"}

package/dist/components/NSBox.module.css

@@ -75,23 +75,39 @@
 		width: 272px !important;
 	}
 }
+
 /*End Input phone*/
 
 .ns_btn_box {
-	opacity: 0;
-	visibility: hidden;
-	background-color: #007bff;
-	color: white;
+	color: #000;
 	border: none;
-	padding: 4px 10px;
-	border-radius: 8px;
 	cursor: pointer;
 	width: max-content;
-	margin: 5px 0;
+	background-color: transparent;
 }
 
 .ns_input_parent:hover .ns_btn_box {
 	opacity: 1;
 	visibility: visible;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.ns_btn_box img {
+	position: inherit;
+}
+
+.ns_full_screen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #0101015c;
+	z-index: 1000;
+	padding: 5%;
+}
+
+.ns_full_screen input {
+	width: 100% !important;
+	max-width: 100%;
 }

package/dist/components/NSBoxEmail.d.ts

@@ -11,6 +11,7 @@ export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps,
 export interface INSBoxEmailState {
     value: string;
     error?: string;
+    isFullScreen: boolean;
 }
 export declare class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState> {
     constructor(props: INSBoxEmailProps);
@@ -18,6 +19,7 @@ export declare class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBox
     getValue(): string;
     setValue(value: string): void;
     private onChanged;
-    private copyToClipboard;
+    private toggleFullScreen;
     render(): import("react/jsx-runtime").JSX.Element;
 }
+export default NSBoxEmail;

package/dist/components/NSBoxEmail.js

@@ -3,17 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import Styles from "./NSBox.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
+import IconFullScreen from '../assets/images/icon-fullscreen.png';
+import IconCopy from '../assets/images/icon-copy.png';
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import CopyToClipboard from '../CopyToClipboard';
 export class NSBoxEmail extends React.Component {
     constructor(props) {
         var _a;
         super(props);
-        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
+        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
-        this.copyToClipboard = this.copyToClipboard.bind(this);
+        this.toggleFullScreen = this.toggleFullScreen.bind(this);
     }
     getError() {
         return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -33,15 +36,17 @@ export class NSBoxEmail extends React.Component {
     }
     onChanged(e) {
         this.setValue(e.target.value);
-        if (this.props.onChanged)
+        if (this.props.onChanged) {
             this.props.onChanged(e);
+        }
     }
-    copyToClipboard() {
-        navigator.clipboard.writeText(this.getValue());
+    toggleFullScreen() {
+        this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
     }
     render() {
         var _a;
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-item-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsxs("div", { className: "d-flex gap-2", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: this.copyToClipboard, children: "Copy" }), _jsx("button", { className: Styles.ns_btn_box, onClick: () => { }, children: "FullScreen" })] })] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputEmail, alt: "Email Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "email", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title] }), _jsxs("div", { className: "d-flex gap-1", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: () => CopyToClipboard.copyToClipboard(this.getValue()), children: _jsx("img", { src: IconCopy, alt: "Copy", width: 14, height: 14 }) }), _jsx("button", { className: Styles.ns_btn_box, onClick: this.toggleFullScreen, children: _jsx("img", { src: IconFullScreen, alt: "FullScreen", width: 14, height: 14 }) })] })] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputEmail, alt: "Email Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "email", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
     }
 }
+export default NSBoxEmail;
 //# sourceMappingURL=NSBoxEmail.js.map

package/dist/components/NSBoxEmail.js.map

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

package/dist/components/NSBoxPhone.d.ts

@@ -12,11 +12,13 @@ export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps,
 export interface INSBoxPhoneState {
     value: string;
     error?: string;
+    isFullScreen: boolean;
 }
 export declare class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneState> {
     constructor(props: INSBoxPhoneProps);
     getError(): string | null;
     getValue(): string;
     setValue(value: string): void;
+    private toggleFullScreen;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSBoxPhone.js

@@ -3,17 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import Styles from "./NSBox.module.css";
 import IconInputPhone from '../assets/images/icon-input-phone.svg';
+import IconFullScreen from '../assets/images/icon-fullscreen.png';
+import IconCopy from '../assets/images/icon-copy.png';
 import PhoneInput from 'react-phone-input-2';
 import 'react-phone-input-2/lib/style.css';
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import CopyToClipboard from '../CopyToClipboard';
 export class NSBoxPhone extends React.Component {
     constructor(props) {
         var _a;
         super(props);
-        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
+        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
+        this.toggleFullScreen = this.toggleFullScreen.bind(this);
     }
     getError() {
         return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -30,9 +34,12 @@ export class NSBoxPhone extends React.Component {
     setValue(value) {
         this.setState({ value });
     }
+    toggleFullScreen() {
+        this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
+    }
     render() {
         var _a;
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { id: this.props.id, className: `${Styles.ns_input_phone_parent} ${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputPhone, alt: "Phone Icon", width: 24, height: 24 }), _jsx(PhoneInput, { value: this.state.value, onChange: this.setValue, country: 'us', inputClass: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { id: this.props.id, className: `${Styles.ns_input_phone_parent} ${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-item-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsxs("div", { className: "d-flex gap-1", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: () => CopyToClipboard.copyToClipboard(this.getValue()), children: _jsx("img", { src: IconCopy, alt: "Copy", width: 14, height: 14 }) }), _jsx("button", { className: Styles.ns_btn_box, onClick: this.toggleFullScreen, children: _jsx("img", { src: IconFullScreen, alt: "FullScreen", width: 14, height: 14 }) })] })] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputPhone, alt: "Phone Icon", width: 24, height: 24 }), _jsx(PhoneInput, { value: this.state.value, onChange: this.setValue, country: 'us', inputClass: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
     }
 }
 //# sourceMappingURL=NSBoxPhone.js.map

package/dist/components/NSBoxPhone.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSBoxPhone.js","sourceRoot":"","sources":["../../src/components/NSBoxPhone.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,UAAU,MAAM,qBAAqB,CAAA;AAC5C,OAAO,mCAAmC,CAAA;AAI1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAgB1D,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA6C;IAElF,YAAY,KAAuB;;QAElC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,CAAC;QACjD,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;IAC1C,CAAC;IACD,QAAQ;QAEP,OAAO,CACN,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;YAClE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CACxE,CAAC;IACH,CAAC;IACD,QAAQ;QAEP,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT;YACC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;SACvB;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACzB,CAAC;IACD,QAAQ,CAAC,KAAa;QAErB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;IACQ,MAAM;;QAEd,OAAO,CACN,8BACC,eAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,MAAM,CAAC,eAAe,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aACzJ,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,kBAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAW,OAAG,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,EACrI,cACC,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,EACF,KAAC,UAAU,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,MAAM,CAAC,QAAQ,EAC3B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAClC,IACI,EACP,KAAC,kBAAkB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,IAC7C,CACH,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSBoxPhone.js","sourceRoot":"","sources":["../../src/components/NSBoxPhone.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayout } from './main';
+import { NSBoxEmail, NSBoxPhone, NSLayout } from './main';
 
 export function App()
 {
@@ -32,7 +32,10 @@ export function App()
 				notifications={[]}
 				background=""
 			>
-				<></>
+				<>
+				<NSBoxEmail title='test' required={true}/>
+					<NSBoxPhone title='test' required={true} />
+				</>
 			</NSLayout>
 		</>
 	);

package/src/CopyToClipboard.ts

@@ -0,0 +1,7 @@
+export default class CopyToClipboard
+{
+    static copyToClipboard(value: string): void
+    {
+        navigator.clipboard.writeText(value);
+    }
+};

package/src/components/NSActionMenu.tsx

@@ -9,12 +9,10 @@ export interface INSActionMenuProps extends IBaseComponentProps
 	handler: () => void;
 	isActive: () => boolean;
 }
-
 export interface INSActionMenuState
 {
 	isShow: boolean;
 }
-
 export function NSActionMenu(props: { name: string, items: INSActionMenuProps[] })
 {
 	const [state, setState] = useState<INSActionMenuState>({
@@ -68,8 +66,8 @@ export function NSActionMenu(props: { name: string, items: INSActionMenuProps[]
 							key={item.id}
 							onClick={item.handler}
 							className={`${Styles.ns_action_item}
-								${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
-								`}
+                                ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
+                                `}
 						>
 							{item.menu_item}
 						</li>

package/src/components/NSBox.module.css

@@ -75,23 +75,39 @@
 		width: 272px !important;
 	}
 }
+
 /*End Input phone*/
 
 .ns_btn_box {
-	opacity: 0;
-	visibility: hidden;
-	background-color: #007bff;
-	color: white;
+	color: #000;
 	border: none;
-	padding: 4px 10px;
-	border-radius: 8px;
 	cursor: pointer;
 	width: max-content;
-	margin: 5px 0;
+	background-color: transparent;
 }
 
 .ns_input_parent:hover .ns_btn_box {
 	opacity: 1;
 	visibility: visible;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.ns_btn_box img {
+	position: inherit;
+}
+
+.ns_full_screen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #0101015c;
+	z-index: 1000;
+	padding: 5%;
+}
+
+.ns_full_screen input {
+	width: 100% !important;
+	max-width: 100%;
 }

package/src/components/NSBoxEmail.tsx

@@ -3,11 +3,14 @@
 import React from "react";
 import Styles from "./NSBox.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
+import IconFullScreen from '../assets/images/icon-fullscreen.png';
+import IconCopy from '../assets/images/icon-copy.png';
 import { Validator } from "../Validator";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import CopyToClipboard from '../CopyToClipboard';
 
 export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -21,19 +24,20 @@ export interface INSBoxEmailState
 {
 	value: string;
 	error?: string;
+	isFullScreen: boolean;
 }
 
-export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState>
-{
+export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState> {
 	constructor(props: INSBoxEmailProps)
 	{
 		super(props);
-		this.state = { value: props.defaultValue ?? "" };
+		this.state = { value: props.defaultValue ?? "", isFullScreen: false };
 		this.setValue = this.setValue.bind(this);
 		this.getValue = this.getValue.bind(this);
 		this.onChanged = this.onChanged.bind(this);
-		this.copyToClipboard = this.copyToClipboard.bind(this);
+		this.toggleFullScreen = this.toggleFullScreen.bind(this);
 	}
+
 	getError(): string | null
 	{
 		return (
@@ -42,6 +46,7 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 			Validator.getErrorEmail(this.props.title, this.state.value)
 		);
 	}
+
 	getValue(): string
 	{
 		let error = this.getError();
@@ -52,30 +57,52 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 		}
 		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);
+		}
 	}
-	private copyToClipboard(): void
+
+	private toggleFullScreen(): void
 	{
-		navigator.clipboard.writeText(this.getValue());
+		this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
 	}
+
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
-					<div className="d-flex justify-content-between align-item-center">
-						<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-						<div className="d-flex gap-2">
-							<button className={Styles.ns_btn_box} onClick={this.copyToClipboard}>Copy</button>
-							<button className={Styles.ns_btn_box} onClick={() => { }}>FullScreen</button>
+				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
+					<div className="d-flex justify-content-between align-items-center">
+						<span className={Styles.ns_input_title}>
+							{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
+						</span>
+						<div className="d-flex gap-1">
+							<button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
+								<img
+									src={IconCopy}
+									alt="Copy"
+									width={14}
+									height={14}
+								/>
+							</button>
+							<button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
+								<img
+									src={IconFullScreen}
+									alt="FullScreen"
+									width={14}
+									height={14}
+								/>
+							</button>
 						</div>
 					</div>
 					<img
@@ -98,4 +125,6 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 			</>
 		);
 	}
-}
+}
+
+export default NSBoxEmail;

package/src/components/NSBoxPhone.tsx

@@ -3,6 +3,8 @@
 import React from "react";
 import Styles from "./NSBox.module.css";
 import IconInputPhone from '../assets/images/icon-input-phone.svg';
+import IconFullScreen from '../assets/images/icon-fullscreen.png';
+import IconCopy from '../assets/images/icon-copy.png';
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
@@ -10,6 +12,7 @@ import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import CopyToClipboard from '../CopyToClipboard';
 
 export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -23,6 +26,7 @@ export interface INSBoxPhoneState
 {
 	value: string;
 	error?: string;
+	isFullScreen: boolean;
 }
 
 export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneState>
@@ -30,9 +34,10 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 	constructor(props: INSBoxPhoneProps)
 	{
 		super(props);
-		this.state = { value: props.defaultValue ?? "" };
+		this.state = { value: props.defaultValue ?? "", isFullScreen: false };
 		this.setValue = this.setValue.bind(this);
 		this.getValue = this.getValue.bind(this);
+		this.toggleFullScreen = this.toggleFullScreen.bind(this);
 	}
 	getError(): string | null
 	{
@@ -55,12 +60,37 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 	{
 		this.setState({ value });
 	}
+	private toggleFullScreen(): void
+	{
+		this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
+	}
 	override render()
 	{
 		return (
 			<>
-				<div id={this.props.id} className={`${Styles.ns_input_phone_parent} ${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>
+				<div id={this.props.id} className={`${Styles.ns_input_phone_parent} ${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
+
+					<div className="d-flex justify-content-between align-item-center">
+						<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+						<div className="d-flex gap-1">
+							<button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
+								<img
+									src={IconCopy}
+									alt="Copy"
+									width={14}
+									height={14}
+								/>
+							</button>
+							<button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
+								<img
+									src={IconFullScreen}
+									alt="FullScreen"
+									width={14}
+									height={14}
+								/>
+							</button>
+						</div>
+					</div>
 					<img
 						className={Styles.ns_input_icon}
 						src={IconInputPhone}