namirasoft-site-react 1.3.191 → 1.3.193

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/App.js +3 -3
  2. package/dist/App.js.map +1 -1
  3. package/dist/CopyToClipboard.d.ts +3 -0
  4. package/dist/CopyToClipboard.js +7 -0
  5. package/dist/CopyToClipboard.js.map +1 -0
  6. package/dist/assets/images/icon-copy.png +0 -0
  7. package/dist/assets/images/icon-fullscreen.png +0 -0
  8. package/dist/components/NSActionMenu.js +2 -2
  9. package/dist/components/NSActionMenu.js.map +1 -1
  10. package/dist/components/NSBox.module.css +23 -7
  11. package/dist/components/NSBoxEmail.d.ts +3 -1
  12. package/dist/components/NSBoxEmail.js +12 -7
  13. package/dist/components/NSBoxEmail.js.map +1 -1
  14. package/dist/components/NSBoxPhone.d.ts +2 -0
  15. package/dist/components/NSBoxPhone.js +10 -3
  16. package/dist/components/NSBoxPhone.js.map +1 -1
  17. package/dist/components/NSBoxString.d.ts +2 -0
  18. package/dist/components/NSBoxString.js +10 -3
  19. package/dist/components/NSBoxString.js.map +1 -1
  20. package/dist/components/NSBoxText.d.ts +3 -0
  21. package/dist/components/NSBoxText.js +15 -4
  22. package/dist/components/NSBoxText.js.map +1 -1
  23. package/dist/components/NSBoxTextArea.d.ts +2 -0
  24. package/dist/components/NSBoxTextArea.js +10 -3
  25. package/dist/components/NSBoxTextArea.js.map +1 -1
  26. package/dist/components/NSBoxTextArea.module.css +35 -0
  27. package/package.json +1 -1
  28. package/src/App.tsx +8 -2
  29. package/src/CopyToClipboard.ts +7 -0
  30. package/src/assets/images/icon-copy.png +0 -0
  31. package/src/assets/images/icon-fullscreen.png +0 -0
  32. package/src/components/NSActionMenu.tsx +2 -4
  33. package/src/components/NSBox.module.css +23 -7
  34. package/src/components/NSBoxEmail.tsx +44 -14
  35. package/src/components/NSBoxPhone.tsx +35 -4
  36. package/src/components/NSBoxString.tsx +36 -4
  37. package/src/components/NSBoxText.tsx +51 -7
  38. package/src/components/NSBoxTextArea.module.css +35 -0
  39. package/src/components/NSBoxTextArea.tsx +37 -4
package/dist/App.js CHANGED
@@ -1,7 +1,7 @@
1
- import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import './App.css';
3
3
  import 'bootstrap/dist/css/bootstrap.min.css';
4
- import { NSLayout } from './main';
4
+ import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout } from './main';
5
5
  export function App() {
6
6
  const onClicked = () => {
7
7
  console.log("clicked");
@@ -18,6 +18,6 @@ export function App() {
18
18
  return (_jsx(_Fragment, { children: _jsx(NSLayout, { header: {
19
19
  title: "any",
20
20
  icons: icons
21
- }, scope: "exampleScope", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsx(_Fragment, {}) }) }));
21
+ }, scope: "exampleScope", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsxs(_Fragment, { children: [_jsx(NSBoxEmail, { title: 'test', required: true }), _jsx(NSBoxPhone, { title: 'test', required: true }), _jsx(NSBoxString, { title: 'test', required: true }), _jsx(NSBoxText, { title: 'test', required: true }), _jsx(NSBoxTextArea, { title: 'test', required: true })] }) }) }));
22
22
  }
23
23
  //# sourceMappingURL=App.js.map
package/dist/App.js.map CHANGED
@@ -1 +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"}
1
+ {"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,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEjG,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,EAC3C,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,EAC5C,KAAC,SAAS,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,EAC1C,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,IAC5C,GACO,GACT,CACH,CAAC;AACH,CAAC"}
package/dist/CopyToClipboard.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export default class CopyToClipboard {
2
+ static copyToClipboard(value: string): void;
3
+ }
package/dist/CopyToClipboard.js ADDED
@@ -0,0 +1,7 @@
1
+ export default class CopyToClipboard {
2
+ static copyToClipboard(value) {
3
+ navigator.clipboard.writeText(value);
4
+ }
5
+ }
6
+ ;
7
+ //# sourceMappingURL=CopyToClipboard.js.map
package/dist/CopyToClipboard.js.map ADDED
@@ -0,0 +1 @@
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/assets/images/icon-copy.png ADDED
Binary file
package/dist/components/NSActionMenu.js CHANGED
@@ -23,7 +23,7 @@ export function NSActionMenu(props) {
23
23
  if (props.items.length == 1)
24
24
  return _jsx(NSButtonBlue, { title: props.items[0].menu_item, onClick: props.items[0].handler });
25
25
  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}
26
- ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
27
- `, children: item.menu_item }, item.id)) })] }));
26
+ ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
27
+ `, children: item.menu_item }, item.id)) })] }));
28
28
  }
29
29
  //# sourceMappingURL=NSActionMenu.js.map
package/dist/components/NSActionMenu.js.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -75,23 +75,39 @@
75
75
  width: 272px !important;
76
76
  }
77
77
  }
78
+
78
79
  /*End Input phone*/
79
80
 
80
81
  .ns_btn_box {
81
- opacity: 0;
82
- visibility: hidden;
83
- background-color: #007bff;
84
- color: white;
82
+ color: #000;
85
83
  border: none;
86
- padding: 4px 10px;
87
- border-radius: 8px;
88
84
  cursor: pointer;
89
85
  width: max-content;
90
- margin: 5px 0;
86
+ background-color: transparent;
91
87
  }
92
88
 
93
89
  .ns_input_parent:hover .ns_btn_box {
94
90
  opacity: 1;
95
91
  visibility: visible;
96
92
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
93
+ }
94
+
95
+ .ns_btn_box img {
96
+ position: inherit;
97
+ }
98
+
99
+ .ns_full_screen {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ background: #0101015c;
106
+ z-index: 1000;
107
+ padding: 5%;
108
+ }
109
+
110
+ .ns_full_screen input {
111
+ width: 100% !important;
112
+ max-width: 100%;
97
113
  }
package/dist/components/NSBoxEmail.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps,
11
11
  export interface INSBoxEmailState {
12
12
  value: string;
13
13
  error?: string;
14
+ isFullScreen: boolean;
14
15
  }
15
16
  export declare class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState> {
16
17
  constructor(props: INSBoxEmailProps);
@@ -18,6 +19,7 @@ export declare class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBox
18
19
  getValue(): string;
19
20
  setValue(value: string): void;
20
21
  private onChanged;
21
- private copyToClipboard;
22
+ private toggleFullScreen;
22
23
  render(): import("react/jsx-runtime").JSX.Element;
23
24
  }
25
+ export default NSBoxEmail;
package/dist/components/NSBoxEmail.js CHANGED
@@ -3,17 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputEmail from '../assets/images/icon-input-email.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import { Validator } from "../Validator";
7
9
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
10
+ import CopyToClipboard from '../CopyToClipboard';
8
11
  export class NSBoxEmail extends React.Component {
9
12
  constructor(props) {
10
13
  var _a;
11
14
  super(props);
12
- this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
15
+ this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
13
16
  this.setValue = this.setValue.bind(this);
14
17
  this.getValue = this.getValue.bind(this);
15
18
  this.onChanged = this.onChanged.bind(this);
16
- this.copyToClipboard = this.copyToClipboard.bind(this);
19
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
17
20
  }
18
21
  getError() {
19
22
  return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -24,7 +27,7 @@ export class NSBoxEmail extends React.Component {
24
27
  let error = this.getError();
25
28
  if (error) {
26
29
  this.setState({ error });
27
- throw new Error(error);
30
+ return '';
28
31
  }
29
32
  return this.state.value;
30
33
  }
@@ -33,15 +36,17 @@ export class NSBoxEmail extends React.Component {
33
36
  }
34
37
  onChanged(e) {
35
38
  this.setValue(e.target.value);
36
- if (this.props.onChanged)
39
+ if (this.props.onChanged) {
37
40
  this.props.onChanged(e);
41
+ }
38
42
  }
39
- copyToClipboard() {
40
- navigator.clipboard.writeText(this.getValue());
43
+ toggleFullScreen() {
44
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
41
45
  }
42
46
  render() {
43
47
  var _a;
44
- 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 })] }));
48
+ 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 })] }));
45
49
  }
46
50
  }
51
+ export default NSBoxEmail;
47
52
  //# sourceMappingURL=NSBoxEmail.js.map
package/dist/components/NSBoxEmail.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSBoxEmail.js","sourceRoot":"","sources":["../../src/components/NSBoxEmail.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSBoxEmail.js","sourceRoot":"","sources":["../../src/components/NSBoxEmail.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSBoxPhone.d.ts CHANGED
@@ -12,11 +12,13 @@ export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps,
12
12
  export interface INSBoxPhoneState {
13
13
  value: string;
14
14
  error?: string;
15
+ isFullScreen: boolean;
15
16
  }
16
17
  export declare class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneState> {
17
18
  constructor(props: INSBoxPhoneProps);
18
19
  getError(): string | null;
19
20
  getValue(): string;
20
21
  setValue(value: string): void;
22
+ private toggleFullScreen;
21
23
  render(): import("react/jsx-runtime").JSX.Element;
22
24
  }
package/dist/components/NSBoxPhone.js CHANGED
@@ -3,17 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputPhone from '../assets/images/icon-input-phone.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import PhoneInput from 'react-phone-input-2';
7
9
  import 'react-phone-input-2/lib/style.css';
8
10
  import { Validator } from "../Validator";
9
11
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
12
+ import CopyToClipboard from '../CopyToClipboard';
10
13
  export class NSBoxPhone extends React.Component {
11
14
  constructor(props) {
12
15
  var _a;
13
16
  super(props);
14
- this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
17
+ this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
15
18
  this.setValue = this.setValue.bind(this);
16
19
  this.getValue = this.getValue.bind(this);
20
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
17
21
  }
18
22
  getError() {
19
23
  return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -23,16 +27,19 @@ export class NSBoxPhone extends React.Component {
23
27
  let error = this.getError();
24
28
  if (error) {
25
29
  this.setState({ error });
26
- throw new Error(error);
30
+ return '';
27
31
  }
28
32
  return this.state.value;
29
33
  }
30
34
  setValue(value) {
31
35
  this.setState({ value });
32
36
  }
37
+ toggleFullScreen() {
38
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
39
+ }
33
40
  render() {
34
41
  var _a;
35
- 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 })] }));
42
+ 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 })] }));
36
43
  }
37
44
  }
38
45
  //# sourceMappingURL=NSBoxPhone.js.map
package/dist/components/NSBoxPhone.js.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"NSBoxPhone.js","sourceRoot":"","sources":["../../src/components/NSBoxPhone.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSBoxString.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps
11
11
  export interface INSBoxStringState {
12
12
  value: string;
13
13
  error?: string;
14
+ isFullScreen: boolean;
14
15
  }
15
16
  export declare class NSBoxString extends React.Component<INSBoxStringProps, INSBoxStringState> {
16
17
  constructor(props: INSBoxStringProps);
@@ -18,5 +19,6 @@ export declare class NSBoxString extends React.Component<INSBoxStringProps, INSB
18
19
  getValue(): string;
19
20
  setValue(value: string): void;
20
21
  private onChanged;
22
+ private toggleFullScreen;
21
23
  render(): import("react/jsx-runtime").JSX.Element;
22
24
  }
package/dist/components/NSBoxString.js CHANGED
@@ -3,16 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputString from '../assets/images/icon-input-string.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import { Validator } from "../Validator";
7
9
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
10
+ import CopyToClipboard from '../CopyToClipboard';
8
11
  export class NSBoxString extends React.Component {
9
12
  constructor(props) {
10
13
  var _a;
11
14
  super(props);
12
- this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
15
+ this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
13
16
  this.getValue = this.getValue.bind(this);
14
17
  this.setValue = this.setValue.bind(this);
15
18
  this.onChanged = this.onChanged.bind(this);
19
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
16
20
  }
17
21
  getError() {
18
22
  return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -22,7 +26,7 @@ export class NSBoxString extends React.Component {
22
26
  let error = this.getError();
23
27
  if (error) {
24
28
  this.setState({ error });
25
- throw new Error(error);
29
+ return '';
26
30
  }
27
31
  return this.state.value;
28
32
  }
@@ -34,9 +38,12 @@ export class NSBoxString extends React.Component {
34
38
  if (this.props.onChanged)
35
39
  this.props.onChanged(e);
36
40
  }
41
+ toggleFullScreen() {
42
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
43
+ }
37
44
  render() {
38
45
  var _a;
39
- 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("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: IconInputString, alt: "String Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
46
+ 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: IconInputString, alt: "String Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
40
47
  }
41
48
  }
42
49
  //# sourceMappingURL=NSBoxString.js.map
package/dist/components/NSBoxString.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSBoxString.js","sourceRoot":"","sources":["../../src/components/NSBoxString.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSBoxString.js","sourceRoot":"","sources":["../../src/components/NSBoxString.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,eAAe,MAAM,wCAAwC,CAAC;AACrE,OAAO,cAAc,MAAM,sCAAsC,CAAC;AAClE,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AAItD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAiBjD,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA+C;IAErF,YAAY,KAAwB;;QAEnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QACtE,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;QAC3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,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;YAEzB,OAAO,EAAE,CAAC;SACV;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;IACO,SAAS,CAAC,CAAsC;QAEvD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACvB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;IACO,gBAAgB;QAEvB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACzE,CAAC;IACQ,MAAM;;QAEd,OAAO,CACN,8BACC,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC9J,eAAK,SAAS,EAAC,mDAAmD,aACjE,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,aACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAU,OAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAC5E,EACP,eAAK,SAAS,EAAC,cAAc,aAC5B,iBAAQ,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,YACpG,cACC,GAAG,EAAE,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,GACM,EACT,iBAAQ,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,YACnE,cACC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,GACM,IACJ,IACD,EACN,cACC,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,EACF,gBACC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAClC,IACG,EACN,KAAC,kBAAkB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,IAC7C,CACH,CAAC;IACH,CAAC;CACD"}
package/dist/components/NSBoxText.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface INSBoxTextProps extends IBaseComponentProps, IValidationProps,
11
11
  export interface INSBoxTextState {
12
12
  value: string;
13
13
  error?: string;
14
+ isFullScreen: boolean;
14
15
  }
15
16
  export declare class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState> {
16
17
  constructor(props: INSBoxTextProps);
@@ -18,5 +19,7 @@ export declare class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTe
18
19
  getValue(): string;
19
20
  setValue(value: string): void;
20
21
  private onChanged;
22
+ private toggleFullScreen;
21
23
  render(): import("react/jsx-runtime").JSX.Element;
22
24
  }
25
+ export default NSBoxText;
package/dist/components/NSBoxText.js CHANGED
@@ -3,16 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputText from '../assets/images/icon-input-text.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import { Validator } from "../Validator";
7
9
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
10
+ import CopyToClipboard from '../CopyToClipboard';
8
11
  export class NSBoxText extends React.Component {
9
12
  constructor(props) {
10
13
  var _a;
11
14
  super(props);
12
- this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
15
+ this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
13
16
  this.getValue = this.getValue.bind(this);
14
17
  this.setValue = this.setValue.bind(this);
15
18
  this.onChanged = this.onChanged.bind(this);
19
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
16
20
  }
17
21
  getError() {
18
22
  return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -22,7 +26,7 @@ export class NSBoxText extends React.Component {
22
26
  let error = this.getError();
23
27
  if (error) {
24
28
  this.setState({ error });
25
- throw new Error(error);
29
+ return '';
26
30
  }
27
31
  return this.state.value;
28
32
  }
@@ -31,12 +35,19 @@ export class NSBoxText extends React.Component {
31
35
  }
32
36
  onChanged(e) {
33
37
  this.setValue(e.target.value);
34
- if (this.props.onChanged)
38
+ if (this.props.onChanged) {
35
39
  this.props.onChanged(e);
40
+ }
41
+ }
42
+ toggleFullScreen() {
43
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }), () => {
44
+ console.log("isFullScreen state updated:", this.state.isFullScreen);
45
+ });
36
46
  }
37
47
  render() {
38
48
  var _a;
39
- 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("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: IconInputText, alt: "Text Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
49
+ 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: IconInputText, alt: "Text Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
40
50
  }
41
51
  }
52
+ export default NSBoxText;
42
53
  //# sourceMappingURL=NSBoxText.js.map
package/dist/components/NSBoxText.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSBoxText.js","sourceRoot":"","sources":["../../src/components/NSBoxText.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSBoxText.js","sourceRoot":"","sources":["../../src/components/NSBoxText.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSBoxTextArea.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationPro
13
13
  export interface INSBoxTextAreaState {
14
14
  value: string;
15
15
  error?: string;
16
+ isFullScreen: boolean;
16
17
  }
17
18
  export declare class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTextAreaState> {
18
19
  constructor(props: INSBoxTextAreaProps);
@@ -20,5 +21,6 @@ export declare class NSBoxTextArea extends React.Component<INSBoxTextAreaProps,
20
21
  getValue(): string;
21
22
  setValue(value: string): void;
22
23
  private onChanged;
24
+ private toggleFullScreen;
23
25
  render(): import("react/jsx-runtime").JSX.Element;
24
26
  }
package/dist/components/NSBoxTextArea.js CHANGED
@@ -14,6 +14,9 @@ import Styles from "./NSBoxTextArea.module.css";
14
14
  import { Validator } from "../Validator";
15
15
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
16
16
  import IconInputString from '../assets/images/icon-input-string.svg';
17
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
18
+ import IconCopy from '../assets/images/icon-copy.png';
19
+ import CopyToClipboard from '../CopyToClipboard';
17
20
  export class NSBoxTextArea extends React.Component {
18
21
  constructor(props) {
19
22
  var _a;
@@ -23,10 +26,11 @@ export class NSBoxTextArea extends React.Component {
23
26
  if (this.props.onChanged)
24
27
  this.props.onChanged();
25
28
  });
26
- this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
29
+ this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
27
30
  this.getValue = this.getValue.bind(this);
28
31
  this.setValue = this.setValue.bind(this);
29
32
  this.onChanged = this.onChanged.bind(this);
33
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
30
34
  }
31
35
  getError() {
32
36
  return (Validator.getError(this.props.title, this.state.value, this.props) ||
@@ -36,16 +40,19 @@ export class NSBoxTextArea extends React.Component {
36
40
  let error = this.getError();
37
41
  if (error) {
38
42
  this.setState({ error });
39
- throw new Error(error);
43
+ return '';
40
44
  }
41
45
  return this.state.value;
42
46
  }
43
47
  setValue(value) {
44
48
  this.setState({ value });
45
49
  }
50
+ toggleFullScreen() {
51
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
52
+ }
46
53
  render() {
47
54
  var _a;
48
- return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_text_area_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_text_area_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsxs("div", { className: Styles.ns_text_area_container, children: [_jsx("figure", { className: Styles.ns_text_area_icon_container, children: _jsx("img", { src: IconInputString, alt: "text-area-icon", width: 24, height: 24 }) }), _jsx("textarea", { style: { height: !this.props.rows ? "96px" : "" }, cols: this.props.cols, rows: this.props.rows, id: this.props.id, value: this.state.value, className: Styles.ns_text_area, placeholder: this.props.placeholder, onChange: this.onChanged })] })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
55
+ return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_text_area_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 }) })] })] }), _jsxs("div", { className: Styles.ns_text_area_container, children: [_jsx("figure", { className: Styles.ns_text_area_icon_container, children: _jsx("img", { src: IconInputString, alt: "text-area-icon", width: 24, height: 24 }) }), _jsx("textarea", { style: { height: !this.props.rows ? "96px" : "" }, cols: this.props.cols, rows: this.props.rows, id: this.props.id, value: this.state.value, className: Styles.ns_text_area, placeholder: this.props.placeholder, onChange: this.onChanged })] })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
49
56
  }
50
57
  }
51
58
  //# sourceMappingURL=NSBoxTextArea.js.map
package/dist/components/NSBoxTextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSBoxTextArea.js","sourceRoot":"","sources":["../../src/components/NSBoxTextArea.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSBoxTextArea.js","sourceRoot":"","sources":["../../src/components/NSBoxTextArea.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSBoxTextArea.module.css CHANGED
@@ -35,4 +35,39 @@
35
35
  .ns_text_area_title {
36
36
  font-size: 16px;
37
37
  font-weight: 400;
38
+ }
39
+
40
+ .ns_btn_box {
41
+ color: #000;
42
+ border: none;
43
+ cursor: pointer;
44
+ width: max-content;
45
+ background-color: transparent;
46
+ }
47
+
48
+ .ns_input_parent:hover .ns_btn_box {
49
+ opacity: 1;
50
+ visibility: visible;
51
+ transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
52
+ }
53
+
54
+ .ns_btn_box img {
55
+ position: inherit;
56
+ }
57
+
58
+ .ns_full_screen {
59
+ position: fixed;
60
+ top: 0;
61
+ left: 0;
62
+ width: 100%;
63
+ height: 100%;
64
+ background: #0101015c;
65
+ z-index: 1000;
66
+ padding: 5%;
67
+ max-width: 100% !important;
68
+ }
69
+
70
+ .ns_full_screen input {
71
+ width: 100% !important;
72
+ max-width: 100%;
38
73
  }
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.191",
11
+ "version": "1.3.193",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
package/src/App.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import './App.css';
2
2
  import 'bootstrap/dist/css/bootstrap.min.css';
3
- import { NSLayout } from './main';
3
+ import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout } from './main';
4
4
 
5
5
  export function App()
6
6
  {
@@ -32,7 +32,13 @@ export function App()
32
32
  notifications={[]}
33
33
  background=""
34
34
  >
35
- <></>
35
+ <>
36
+ <NSBoxEmail title='test' required={true}/>
37
+ <NSBoxPhone title='test' required={true} />
38
+ <NSBoxString title='test' required={true} />
39
+ <NSBoxText title='test' required={true} />
40
+ <NSBoxTextArea title='test' required={true} />
41
+ </>
36
42
  </NSLayout>
37
43
  </>
38
44
  );
package/src/CopyToClipboard.ts ADDED
@@ -0,0 +1,7 @@
1
+ export default class CopyToClipboard
2
+ {
3
+ static copyToClipboard(value: string): void
4
+ {
5
+ navigator.clipboard.writeText(value);
6
+ }
7
+ };
package/src/assets/images/icon-copy.png ADDED
Binary file
package/src/components/NSActionMenu.tsx CHANGED
@@ -9,12 +9,10 @@ export interface INSActionMenuProps extends IBaseComponentProps
9
9
  handler: () => void;
10
10
  isActive: () => boolean;
11
11
  }
12
-
13
12
  export interface INSActionMenuState
14
13
  {
15
14
  isShow: boolean;
16
15
  }
17
-
18
16
  export function NSActionMenu(props: { name: string, items: INSActionMenuProps[] })
19
17
  {
20
18
  const [state, setState] = useState<INSActionMenuState>({
@@ -68,8 +66,8 @@ export function NSActionMenu(props: { name: string, items: INSActionMenuProps[]
68
66
  key={item.id}
69
67
  onClick={item.handler}
70
68
  className={`${Styles.ns_action_item}
71
- ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
72
- `}
69
+ ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
70
+ `}
73
71
  >
74
72
  {item.menu_item}
75
73
  </li>
package/src/components/NSBox.module.css CHANGED
@@ -75,23 +75,39 @@
75
75
  width: 272px !important;
76
76
  }
77
77
  }
78
+
78
79
  /*End Input phone*/
79
80
 
80
81
  .ns_btn_box {
81
- opacity: 0;
82
- visibility: hidden;
83
- background-color: #007bff;
84
- color: white;
82
+ color: #000;
85
83
  border: none;
86
- padding: 4px 10px;
87
- border-radius: 8px;
88
84
  cursor: pointer;
89
85
  width: max-content;
90
- margin: 5px 0;
86
+ background-color: transparent;
91
87
  }
92
88
 
93
89
  .ns_input_parent:hover .ns_btn_box {
94
90
  opacity: 1;
95
91
  visibility: visible;
96
92
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
93
+ }
94
+
95
+ .ns_btn_box img {
96
+ position: inherit;
97
+ }
98
+
99
+ .ns_full_screen {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ background: #0101015c;
106
+ z-index: 1000;
107
+ padding: 5%;
108
+ }
109
+
110
+ .ns_full_screen input {
111
+ width: 100% !important;
112
+ max-width: 100%;
97
113
  }
package/src/components/NSBoxEmail.tsx CHANGED
@@ -3,11 +3,14 @@
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputEmail from '../assets/images/icon-input-email.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import { Validator } from "../Validator";
7
9
  import { IValidationProps } from "../props/IValidationProps";
8
10
  import { IValidationStringProps } from "../props/IValidationStringProps";
9
11
  import { IBaseComponentProps } from "../props/IBaseComponentProps";
10
12
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
13
+ import CopyToClipboard from '../CopyToClipboard';
11
14
 
12
15
  export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
13
16
  {
@@ -21,19 +24,20 @@ export interface INSBoxEmailState
21
24
  {
22
25
  value: string;
23
26
  error?: string;
27
+ isFullScreen: boolean;
24
28
  }
25
29
 
26
- export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState>
27
- {
30
+ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState> {
28
31
  constructor(props: INSBoxEmailProps)
29
32
  {
30
33
  super(props);
31
- this.state = { value: props.defaultValue ?? "" };
34
+ this.state = { value: props.defaultValue ?? "", isFullScreen: false };
32
35
  this.setValue = this.setValue.bind(this);
33
36
  this.getValue = this.getValue.bind(this);
34
37
  this.onChanged = this.onChanged.bind(this);
35
- this.copyToClipboard = this.copyToClipboard.bind(this);
38
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
36
39
  }
40
+
37
41
  getError(): string | null
38
42
  {
39
43
  return (
@@ -42,40 +46,64 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
42
46
  Validator.getErrorEmail(this.props.title, this.state.value)
43
47
  );
44
48
  }
49
+
45
50
  getValue(): string
46
51
  {
47
52
  let error = this.getError();
48
53
  if (error)
49
54
  {
50
55
  this.setState({ error });
51
- throw new Error(error);
56
+ // throw new Error(error);
57
+ return '';
52
58
  }
53
59
  return this.state.value;
54
60
  }
61
+
55
62
  setValue(value: string): void
56
63
  {
57
64
  this.setState({ value });
58
65
  }
66
+
59
67
  private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
60
68
  {
61
69
  this.setValue(e.target.value);
62
70
  if (this.props.onChanged)
71
+ {
63
72
  this.props.onChanged(e);
73
+ }
64
74
  }
65
- private copyToClipboard(): void
75
+
76
+ private toggleFullScreen(): void
66
77
  {
67
- navigator.clipboard.writeText(this.getValue());
78
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
68
79
  }
80
+
69
81
  override render()
70
82
  {
71
83
  return (
72
84
  <>
73
- <div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
74
- <div className="d-flex justify-content-between align-item-center">
75
- <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
76
- <div className="d-flex gap-2">
77
- <button className={Styles.ns_btn_box} onClick={this.copyToClipboard}>Copy</button>
78
- <button className={Styles.ns_btn_box} onClick={() => { }}>FullScreen</button>
85
+ <div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
86
+ <div className="d-flex justify-content-between align-items-center">
87
+ <span className={Styles.ns_input_title}>
88
+ {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
89
+ </span>
90
+ <div className="d-flex gap-1">
91
+ <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
92
+ <img
93
+ src={IconCopy}
94
+ alt="Copy"
95
+ width={14}
96
+ height={14}
97
+ />
98
+ </button>
99
+ <button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
100
+ <img
101
+ src={IconFullScreen}
102
+ alt="FullScreen"
103
+ width={14}
104
+ height={14}
105
+ />
106
+ </button>
79
107
  </div>
80
108
  </div>
81
109
  <img
@@ -98,4 +126,6 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
98
126
  </>
99
127
  );
100
128
  }
101
- }
129
+ }
130
+
131
+ export default NSBoxEmail;
package/src/components/NSBoxPhone.tsx CHANGED
@@ -3,6 +3,8 @@
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputPhone from '../assets/images/icon-input-phone.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import PhoneInput from 'react-phone-input-2'
7
9
  import 'react-phone-input-2/lib/style.css'
8
10
  import { IBaseComponentProps } from "../props/IBaseComponentProps";
@@ -10,6 +12,7 @@ import { IValidationProps } from "../props/IValidationProps";
10
12
  import { IValidationStringProps } from "../props/IValidationStringProps";
11
13
  import { Validator } from "../Validator";
12
14
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
15
+ import CopyToClipboard from '../CopyToClipboard';
13
16
 
14
17
  export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
15
18
  {
@@ -23,6 +26,7 @@ export interface INSBoxPhoneState
23
26
  {
24
27
  value: string;
25
28
  error?: string;
29
+ isFullScreen: boolean;
26
30
  }
27
31
 
28
32
  export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneState>
@@ -30,9 +34,10 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
30
34
  constructor(props: INSBoxPhoneProps)
31
35
  {
32
36
  super(props);
33
- this.state = { value: props.defaultValue ?? "" };
37
+ this.state = { value: props.defaultValue ?? "", isFullScreen: false };
34
38
  this.setValue = this.setValue.bind(this);
35
39
  this.getValue = this.getValue.bind(this);
40
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
36
41
  }
37
42
  getError(): string | null
38
43
  {
@@ -47,7 +52,8 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
47
52
  if (error)
48
53
  {
49
54
  this.setState({ error });
50
- throw new Error(error);
55
+ // throw new Error(error);
56
+ return '';
51
57
  }
52
58
  return this.state.value;
53
59
  }
@@ -55,12 +61,37 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
55
61
  {
56
62
  this.setState({ value });
57
63
  }
64
+ private toggleFullScreen(): void
65
+ {
66
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
67
+ }
58
68
  override render()
59
69
  {
60
70
  return (
61
71
  <>
62
- <div id={this.props.id} className={`${Styles.ns_input_phone_parent} ${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
63
- <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
72
+ <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}>
73
+
74
+ <div className="d-flex justify-content-between align-item-center">
75
+ <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
76
+ <div className="d-flex gap-1">
77
+ <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
78
+ <img
79
+ src={IconCopy}
80
+ alt="Copy"
81
+ width={14}
82
+ height={14}
83
+ />
84
+ </button>
85
+ <button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
86
+ <img
87
+ src={IconFullScreen}
88
+ alt="FullScreen"
89
+ width={14}
90
+ height={14}
91
+ />
92
+ </button>
93
+ </div>
94
+ </div>
64
95
  <img
65
96
  className={Styles.ns_input_icon}
66
97
  src={IconInputPhone}
package/src/components/NSBoxString.tsx CHANGED
@@ -3,11 +3,14 @@
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputString from '../assets/images/icon-input-string.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import { IBaseComponentProps } from "../props/IBaseComponentProps";
7
9
  import { IValidationProps } from "../props/IValidationProps";
8
10
  import { IValidationStringProps } from "../props/IValidationStringProps";
9
11
  import { Validator } from "../Validator";
10
12
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
13
+ import CopyToClipboard from '../CopyToClipboard';
11
14
 
12
15
  export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
13
16
  {
@@ -21,6 +24,7 @@ export interface INSBoxStringState
21
24
  {
22
25
  value: string;
23
26
  error?: string;
27
+ isFullScreen: boolean;
24
28
  }
25
29
 
26
30
  export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxStringState>
@@ -28,10 +32,11 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
28
32
  constructor(props: INSBoxStringProps)
29
33
  {
30
34
  super(props);
31
- this.state = { value: props.defaultValue ?? "" };
35
+ this.state = { value: props.defaultValue ?? "", isFullScreen: false };
32
36
  this.getValue = this.getValue.bind(this);
33
37
  this.setValue = this.setValue.bind(this);
34
38
  this.onChanged = this.onChanged.bind(this);
39
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
35
40
  }
36
41
  getError(): string | null
37
42
  {
@@ -46,7 +51,8 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
46
51
  if (error)
47
52
  {
48
53
  this.setState({ error });
49
- throw new Error(error);
54
+ // throw new Error(error);
55
+ return '';
50
56
  }
51
57
  return this.state.value;
52
58
  }
@@ -60,12 +66,38 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
60
66
  if (this.props.onChanged)
61
67
  this.props.onChanged(e);
62
68
  }
69
+ private toggleFullScreen(): void
70
+ {
71
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
72
+ }
63
73
  override render()
64
74
  {
65
75
  return (
66
76
  <>
67
- <div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
68
- <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
77
+ <div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
78
+ <div className="d-flex justify-content-between align-items-center">
79
+ <span className={Styles.ns_input_title}>
80
+ {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
81
+ </span>
82
+ <div className="d-flex gap-1">
83
+ <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
84
+ <img
85
+ src={IconCopy}
86
+ alt="Copy"
87
+ width={14}
88
+ height={14}
89
+ />
90
+ </button>
91
+ <button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
92
+ <img
93
+ src={IconFullScreen}
94
+ alt="FullScreen"
95
+ width={14}
96
+ height={14}
97
+ />
98
+ </button>
99
+ </div>
100
+ </div>
69
101
  <img
70
102
  className={Styles.ns_input_icon}
71
103
  src={IconInputString}
package/src/components/NSBoxText.tsx CHANGED
@@ -3,11 +3,14 @@
3
3
  import React from "react";
4
4
  import Styles from "./NSBox.module.css";
5
5
  import IconInputText from '../assets/images/icon-input-text.svg';
6
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
7
+ import IconCopy from '../assets/images/icon-copy.png';
6
8
  import { IBaseComponentProps } from "../props/IBaseComponentProps";
7
9
  import { IValidationProps } from "../props/IValidationProps";
8
10
  import { IValidationStringProps } from "../props/IValidationStringProps";
9
11
  import { Validator } from "../Validator";
10
12
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
13
+ import CopyToClipboard from '../CopyToClipboard';
11
14
 
12
15
  export interface INSBoxTextProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
13
16
  {
@@ -21,18 +24,20 @@ export interface INSBoxTextState
21
24
  {
22
25
  value: string;
23
26
  error?: string;
27
+ isFullScreen: boolean;
24
28
  }
25
29
 
26
- export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
27
- {
30
+ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState> {
28
31
  constructor(props: INSBoxTextProps)
29
32
  {
30
33
  super(props);
31
- this.state = { value: props.defaultValue ?? "" };
34
+ this.state = { value: props.defaultValue ?? "", isFullScreen: false };
32
35
  this.getValue = this.getValue.bind(this);
33
36
  this.setValue = this.setValue.bind(this);
34
37
  this.onChanged = this.onChanged.bind(this);
38
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
35
39
  }
40
+
36
41
  getError(): string | null
37
42
  {
38
43
  return (
@@ -40,32 +45,69 @@ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
40
45
  Validator.getErrorString(this.props.title, this.state.value, this.props)
41
46
  );
42
47
  }
48
+
43
49
  getValue(): string
44
50
  {
45
51
  let error = this.getError();
46
52
  if (error)
47
53
  {
48
54
  this.setState({ error });
49
- throw new Error(error);
55
+ // throw new Error(error);
56
+ return '';
50
57
  }
51
58
  return this.state.value;
52
59
  }
60
+
53
61
  setValue(value: string): void
54
62
  {
55
63
  this.setState({ value });
56
64
  }
65
+
57
66
  private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
58
67
  {
59
68
  this.setValue(e.target.value);
60
69
  if (this.props.onChanged)
70
+ {
61
71
  this.props.onChanged(e);
72
+ }
62
73
  }
74
+
75
+ private toggleFullScreen(): void
76
+ {
77
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }), () =>
78
+ {
79
+ console.log("isFullScreen state updated:", this.state.isFullScreen);
80
+ });
81
+ }
82
+
63
83
  override render()
64
84
  {
65
85
  return (
66
86
  <>
67
- <div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
68
- <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
87
+ <div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
88
+ <div className="d-flex justify-content-between align-items-center">
89
+ <span className={Styles.ns_input_title}>
90
+ {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
91
+ </span>
92
+ <div className="d-flex gap-1">
93
+ <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
94
+ <img
95
+ src={IconCopy}
96
+ alt="Copy"
97
+ width={14}
98
+ height={14}
99
+ />
100
+ </button>
101
+ <button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
102
+ <img
103
+ src={IconFullScreen}
104
+ alt="FullScreen"
105
+ width={14}
106
+ height={14}
107
+ />
108
+ </button>
109
+ </div>
110
+ </div>
69
111
  <img
70
112
  className={Styles.ns_input_icon}
71
113
  src={IconInputText}
@@ -86,4 +128,6 @@ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
86
128
  </>
87
129
  );
88
130
  }
89
- }
131
+ }
132
+
133
+ export default NSBoxText;
package/src/components/NSBoxTextArea.module.css CHANGED
@@ -35,4 +35,39 @@
35
35
  .ns_text_area_title {
36
36
  font-size: 16px;
37
37
  font-weight: 400;
38
+ }
39
+
40
+ .ns_btn_box {
41
+ color: #000;
42
+ border: none;
43
+ cursor: pointer;
44
+ width: max-content;
45
+ background-color: transparent;
46
+ }
47
+
48
+ .ns_input_parent:hover .ns_btn_box {
49
+ opacity: 1;
50
+ visibility: visible;
51
+ transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
52
+ }
53
+
54
+ .ns_btn_box img {
55
+ position: inherit;
56
+ }
57
+
58
+ .ns_full_screen {
59
+ position: fixed;
60
+ top: 0;
61
+ left: 0;
62
+ width: 100%;
63
+ height: 100%;
64
+ background: #0101015c;
65
+ z-index: 1000;
66
+ padding: 5%;
67
+ max-width: 100% !important;
68
+ }
69
+
70
+ .ns_full_screen input {
71
+ width: 100% !important;
72
+ max-width: 100%;
38
73
  }
package/src/components/NSBoxTextArea.tsx CHANGED
@@ -8,6 +8,10 @@ import { IValidationStringProps } from "../props/IValidationStringProps";
8
8
  import { Validator } from "../Validator";
9
9
  import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
10
10
  import IconInputString from '../assets/images/icon-input-string.svg';
11
+ import IconFullScreen from '../assets/images/icon-fullscreen.png';
12
+ import IconCopy from '../assets/images/icon-copy.png';
13
+ import CopyToClipboard from '../CopyToClipboard';
14
+
11
15
  export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
12
16
  {
13
17
  title: string;
@@ -22,6 +26,7 @@ export interface INSBoxTextAreaState
22
26
  {
23
27
  value: string;
24
28
  error?: string;
29
+ isFullScreen: boolean;
25
30
  }
26
31
 
27
32
  export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTextAreaState>
@@ -29,10 +34,11 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
29
34
  constructor(props: INSBoxTextAreaProps)
30
35
  {
31
36
  super(props);
32
- this.state = { value: props.defaultValue ?? "" };
37
+ this.state = { value: props.defaultValue ?? "", isFullScreen: false };
33
38
  this.getValue = this.getValue.bind(this);
34
39
  this.setValue = this.setValue.bind(this);
35
40
  this.onChanged = this.onChanged.bind(this);
41
+ this.toggleFullScreen = this.toggleFullScreen.bind(this);
36
42
  }
37
43
  getError(): string | null
38
44
  {
@@ -47,7 +53,8 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
47
53
  if (error)
48
54
  {
49
55
  this.setState({ error });
50
- throw new Error(error);
56
+ // throw new Error(error);
57
+ return '';
51
58
  }
52
59
  return this.state.value;
53
60
 
@@ -62,12 +69,38 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
62
69
  if (this.props.onChanged)
63
70
  this.props.onChanged();
64
71
  }
72
+ private toggleFullScreen(): void
73
+ {
74
+ this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
75
+ }
65
76
  override render()
66
77
  {
67
78
  return (
68
79
  <>
69
- <div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
70
- <span className={Styles.ns_text_area_title}> {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title} </span>
80
+ <div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
81
+ <div className="d-flex justify-content-between align-items-center">
82
+ <span className={Styles.ns_input_title}>
83
+ {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
84
+ </span>
85
+ <div className="d-flex gap-1">
86
+ <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
87
+ <img
88
+ src={IconCopy}
89
+ alt="Copy"
90
+ width={14}
91
+ height={14}
92
+ />
93
+ </button>
94
+ <button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
95
+ <img
96
+ src={IconFullScreen}
97
+ alt="FullScreen"
98
+ width={14}
99
+ height={14}
100
+ />
101
+ </button>
102
+ </div>
103
+ </div>
71
104
  <div className={Styles.ns_text_area_container}>
72
105
  <figure className={Styles.ns_text_area_icon_container}>
73
106
  <img