namirasoft-site-react 1.3.303 → 1.3.305

package/src/components/NSPanel.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react";
-import Styles from './NSPanel.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSPanelProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    grid: boolean;
-}
-export function NSPanel(props: NSPanelProps)
-{
-    return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            {props.children}
-        </section>
-    );
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSPanelProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+export function NSPanel(props: NSPanelProps)
+{
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSPrintModal.module.css

@@ -0,0 +1,82 @@
+.ns_print_container {
+    /* position: absolute; */
+    z-index: 1;
+    top: 30px;
+    transform: translate(0, 0);
+    right: 0;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 16px;
+    border: 0.2px solid rgb(210, 210, 210);
+    padding: 16px;
+    max-width: 380px;
+}
+
+.ns_header_print {
+    position: relative;
+}
+
+.ns_close_icon {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
+
+.ns_print_title {
+    display: flex;
+    gap: 8px;
+    color: #141B5C;
+    justify-content: center;
+    margin: 0;
+    align-items: center;
+}
+
+.ns_print_description {
+    color: #141B5C;
+    margin: 0;
+}
+
+.ns_parent_checkboxs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.ns_w_box_boolean div {
+    width: 100% !important;
+}
+
+.ns_w_box_boolean {
+    width: 100% !important;
+}
+
+.ns_w_box_string {
+    width: 100% !important;
+}
+
+.ns_w_box_string input {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_print_container {
+        max-width: 590px;
+    }
+
+    .ns_w_box_boolean div {
+        width: 272px !important;
+    }
+
+    .ns_w_box_boolean {
+        width: 272px !important;
+    }
+
+    .ns_w_box_string {
+        width: 272px !important;
+    }
+
+    .ns_w_box_string input {
+        width: 272px !important;
+    }
+}

package/src/components/NSPrintModal.tsx

@@ -0,0 +1,99 @@
+import React, { Component, createRef } from 'react';
+import Styles from './NSPrintModal.module.css';
+import { NSButtonBlue } from './NSButtonBlue';
+import { NSBoxString } from './NSBoxString';
+import { NSBoxBoolean } from './NSBoxBoolean';
+import { NSSpace } from './NSSpace';
+import {  NSSpaceSizeType } from '../main';
+// import { NamirasoftAPIProductServer, ProductFullRow } from 'namirasoft-api-product';
+// import CloseToast from '../assets/images/icon-close.png';
+// import { NSBoxSearch, NSLoading } from 'namirasoft-site-react';
+
+export interface NSPrintModalProps
+{
+    onClose: () => void;
+}
+
+interface NSPrintModalState
+{
+}
+
+export class NSPrintModal extends Component<NSPrintModalProps, NSPrintModalState>
+{
+    private toastRef: React.RefObject<HTMLDivElement>;
+
+    constructor(props: NSPrintModalProps)
+    {
+        super(props);
+        this.toastRef = createRef();
+        this.state = { products: null, search: "" };
+        this.onClickOutside = this.onClickOutside.bind(this);
+    }
+
+    override componentDidMount(): void
+    {
+        document.addEventListener('mousedown', this.onClickOutside);
+    }
+
+    override componentWillUnmount(): void
+    {
+        document.removeEventListener('mousedown', this.onClickOutside);
+    }
+
+    private onClickOutside(event: MouseEvent)
+    {
+        if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
+        {
+            this.props.onClose();
+        }
+    }
+
+    override render()
+    {
+        return (
+            <>
+                <div className={Styles.ns_print_container} ref={this.toastRef}>
+                    <div className={Styles.ns_header_print}>
+                        <img
+                            src="https://static.namirasoft.com/image/concept/close/blue.svg"
+                            alt="Close"
+                            width={24}
+                            height={24}
+                            onClick={(e) =>
+                            {
+                                e.stopPropagation();
+                                this.props.onClose();
+                            }}
+                            className={Styles.ns_close_icon}
+                        />
+                        <div className={Styles.ns_print_title}>
+                            <img
+                                src="https://static.namirasoft.com/image/concept/print/blue.svg"
+                                alt="Print"
+                                width={24}
+                                height={24}
+                            />
+                            <h2 className='m-0'>Page Selection</h2>
+                        </div>
+                        <NSSpace size={NSSpaceSizeType.SMALL}/>
+                        <p className={Styles.ns_print_description}>Please select which pages you want to continue with</p>
+                        <NSSpace size={NSSpaceSizeType.SMALL} />
+                        <div className={Styles.ns_parent_checkboxs}>
+                            <NSBoxBoolean classList={[Styles.ns_w_box_boolean]} title="Current page" required={false}/>
+                            <NSBoxBoolean classList={[Styles.ns_w_box_boolean]}  title="Only Selected Items" required={false}/>
+                            <NSBoxBoolean classList={[Styles.ns_w_box_boolean]}  title="Custom Pages" required={false}/>
+                            <NSBoxBoolean classList={[Styles.ns_w_box_boolean]}  title="All Pages" required={false}/>
+                        </div>
+                        <NSSpace size={NSSpaceSizeType.MICRO} />
+                        <NSBoxString classList={[Styles.ns_w_box_string]} required={false} title="Page1"/>
+                        <NSSpace size={NSSpaceSizeType.SMALL} />
+                        <NSButtonBlue style={{width:"100%"}} title='Apply' onClick={()=>{}}/>
+                    </div>
+                </div>
+                <div className={Styles.ns_toast_background}></div>
+            </>
+        );
+    }
+}
+
+export default NSPrintModal;

package/src/components/NSRadioButton.module.css

@@ -1,29 +1,29 @@
-.ns_heading {
-    color: #141B5C;
-    text-align: center;
-}
-
-.ns_radioGroup {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    margin-top: 20px;
-    border-radius: 8px;
-    background-color: white;
-    padding: 30px;
-    box-shadow: 0px 2px 3.84px rgba(0 0 0.25);
-    color: #141B5C;
-}
-
-.ns_radioButton {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.ns_radioLabel {
-    margin-left: 8px;
-    font-size: 17px;
-    color: #333;
+.ns_heading {
+    color: #141B5C;
+    text-align: center;
+}
+
+.ns_radioGroup {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 20px;
+    border-radius: 8px;
+    background-color: white;
+    padding: 30px;
+    box-shadow: 0px 2px 3.84px rgba(0 0 0.25);
+    color: #141B5C;
+}
+
+.ns_radioButton {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.ns_radioLabel {
+    margin-left: 8px;
+    font-size: 17px;
+    color: #333;
 }

package/src/components/NSRadioButton.tsx

@@ -1,118 +1,118 @@
-import { useState } from "react";
-import Styles from './NSRadioButton.module.css';
-
-export interface INSRadioButtonProps
-{
-    title: any
-}
-function NSRadioButton(props: INSRadioButtonProps)
-{
-    const [
-        selectedValue,
-        setSelectedValue,
-    ] = useState("option1");
-
-    const handleRadioChange = (
-        value: any
-    ) =>
-    {
-        setSelectedValue(value);
-    };
-
-
-    return (
-        <div>
-            <h2 className={Styles.ns_heading}>
-                {props.title}
-            </h2>
-            <div
-                className={Styles.container}
-            >
-                <div
-                    className={Styles.ns_radioGroup}
-                >
-                    <div
-                        className={Styles.ns_radioButton}
-                    >
-                        <input
-                            type="radio"
-                            id="option1"
-                            value="option1"
-                            checked={
-                                selectedValue ===
-                                "option1"
-                            }
-                            onChange={() =>
-                                handleRadioChange(
-                                    "option1"
-                                )
-                            }
-                        />
-                        <label
-                            htmlFor="option1"
-                            className={
-                                Styles.radioLabel
-                            }
-                        >
-                            First Item
-                        </label>
-                    </div>
-
-                    <div
-                        className={
-                            Styles.ns_radioButton
-                        }
-                    >
-                        <input
-                            type="radio"
-                            id="option2"
-                            value="option2"
-                            checked={
-                                selectedValue ===
-                                "option2"
-                            }
-                            onChange={() =>
-                                handleRadioChange(
-                                    "option2"
-                                )
-                            }
-                        />
-                        <label
-                            htmlFor="option2"
-                            className={Styles.radioLabel}
-                        >
-                            Second Item
-                        </label>
-                    </div>
-
-                    <div
-                        className={Styles.ns_radioButton}
-                    >
-                        <input
-                            type="radio"
-                            id="option3"
-                            value="option3"
-                            checked={
-                                selectedValue ===
-                                "option3"
-                            }
-                            onChange={() =>
-                                handleRadioChange(
-                                    "option3"
-                                )
-                            }
-                        />
-                        <label
-                            htmlFor="option3"
-                            className={Styles.radioLabel}
-                        >
-                            Third Item
-                        </label>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
+import { useState } from "react";
+import Styles from './NSRadioButton.module.css';
+
+export interface INSRadioButtonProps
+{
+    title: any
+}
+function NSRadioButton(props: INSRadioButtonProps)
+{
+    const [
+        selectedValue,
+        setSelectedValue,
+    ] = useState("option1");
+
+    const handleRadioChange = (
+        value: any
+    ) =>
+    {
+        setSelectedValue(value);
+    };
+
+
+    return (
+        <div>
+            <h2 className={Styles.ns_heading}>
+                {props.title}
+            </h2>
+            <div
+                className={Styles.container}
+            >
+                <div
+                    className={Styles.ns_radioGroup}
+                >
+                    <div
+                        className={Styles.ns_radioButton}
+                    >
+                        <input
+                            type="radio"
+                            id="option1"
+                            value="option1"
+                            checked={
+                                selectedValue ===
+                                "option1"
+                            }
+                            onChange={() =>
+                                handleRadioChange(
+                                    "option1"
+                                )
+                            }
+                        />
+                        <label
+                            htmlFor="option1"
+                            className={
+                                Styles.radioLabel
+                            }
+                        >
+                            First Item
+                        </label>
+                    </div>
+
+                    <div
+                        className={
+                            Styles.ns_radioButton
+                        }
+                    >
+                        <input
+                            type="radio"
+                            id="option2"
+                            value="option2"
+                            checked={
+                                selectedValue ===
+                                "option2"
+                            }
+                            onChange={() =>
+                                handleRadioChange(
+                                    "option2"
+                                )
+                            }
+                        />
+                        <label
+                            htmlFor="option2"
+                            className={Styles.radioLabel}
+                        >
+                            Second Item
+                        </label>
+                    </div>
+
+                    <div
+                        className={Styles.ns_radioButton}
+                    >
+                        <input
+                            type="radio"
+                            id="option3"
+                            value="option3"
+                            checked={
+                                selectedValue ===
+                                "option3"
+                            }
+                            onChange={() =>
+                                handleRadioChange(
+                                    "option3"
+                                )
+                            }
+                        />
+                        <label
+                            htmlFor="option3"
+                            className={Styles.radioLabel}
+                        >
+                            Third Item
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 export default NSRadioButton; 

package/src/components/NSSection.module.css

@@ -1,11 +1,11 @@
-.ns_section {
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
-}
-
-.ns_section_center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+.ns_section {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -1,24 +1,24 @@
-import { ReactNode } from "react";
-import Styles from './NSSection.module.css'
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionProps extends IBaseComponentProps
-{
-	children: ReactNode;
-	center_items?: boolean;
-}
-
-export function NSSection(props: INSSectionProps)
-{
-	let styles = [Styles.ns_section];
-	if (props.center_items)
-		styles.push(Styles.ns_section_center);
-	return (
-		<section id={props.id}
-			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.children}
-		</section>
-	);
+import { ReactNode } from "react";
+import Styles from './NSSection.module.css'
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionProps extends IBaseComponentProps
+{
+	children: ReactNode;
+	center_items?: boolean;
+}
+
+export function NSSection(props: INSSectionProps)
+{
+	let styles = [Styles.ns_section];
+	if (props.center_items)
+		styles.push(Styles.ns_section_center);
+	return (
+		<section id={props.id}
+			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.children}
+		</section>
+	);
 }

package/src/components/NSSectionBars.module.css

@@ -1,11 +1,11 @@
-.ns_entity_bar_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	gap: 24px;
+.ns_entity_bar_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	gap: 24px;
 }

package/src/components/NSSectionBars.tsx

@@ -1,26 +1,26 @@
-import Styles from './NSSectionBars.module.css';
-import { NSEntityBar, INSEntityBarProps } from './NSEntityBar';
-import { NSSection } from './NSSection';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionBarsProps extends IBaseComponentProps
-{
-	title?: string;
-	bars: INSEntityBarProps[]
-}
-
-export function NSSectionBars(props: INSSectionBarsProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-				{
-					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionBars.module.css';
+import { NSEntityBar, INSEntityBarProps } from './NSEntityBar';
+import { NSSection } from './NSSection';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionBarsProps extends IBaseComponentProps
+{
+	title?: string;
+	bars: INSEntityBarProps[]
+}
+
+export function NSSectionBars(props: INSSectionBarsProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }