namirasoft-site-react 1.4.164 → 1.4.166

package/src/components/NSListGrouped.module.css

@@ -1,70 +1,70 @@
-.ns_list_grouped_parent {
-	width: 100%;
-	max-width: 560px;
-	border-radius: 8px;
-	border: solid 1px #B2BBD9;
-	background-color: #fff;
-	padding-bottom: 16px;
-	height: 360px;
-	overflow: auto;
-}
-
-.ns_list_grouped_parent::-webkit-scrollbar {
-	width: 1rem;
-}
-
-.ns_list_grouped_parent::-webkit-scrollbar-track {
-	box-shadow: inset 0 0 6px #E8EBF6;
-}
-
-.ns_list_grouped_parent::-webkit-scrollbar-thumb {
-	background-color: #A1A4B0;
-	border-radius: 8px;
-}
-
-.ns_list_grouped {
-	list-style-type: none;
-	color: #141B5C;
-	padding: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: flex-start;
-	font-size: 16px;
-	font-weight: 700;
-	width: 100%;
-}
-
-.ns_group_category {
-	border-bottom: solid 1px currentColor;
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	padding: 10px 8px;
-}
-
-.ns_list_grouped li {
-	width: 100%;
-}
-
-.ns_group_item {
-	cursor: pointer;
-	padding: 6px 0 6px 24px;
-	font-size: 16px;
-	font-weight: 300;
-	color: #141B5C;
-	border-bottom: solid 1px currentColor;
-	width: 100%;
-	display: inline-block;
-	transition: all 0.1s;
-}
-
-.ns_group_item:hover {
-	background-color: #B2BBD9;
-	font-weight: 700;
-}
-
-.ns_block {
-	display: block;
+.ns_list_grouped_parent {
+	width: 100%;
+	max-width: 560px;
+	border-radius: 8px;
+	border: solid 1px #B2BBD9;
+	background-color: #fff;
+	padding-bottom: 16px;
+	height: 360px;
+	overflow: auto;
+}
+
+.ns_list_grouped_parent::-webkit-scrollbar {
+	width: 1rem;
+}
+
+.ns_list_grouped_parent::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 6px #E8EBF6;
+}
+
+.ns_list_grouped_parent::-webkit-scrollbar-thumb {
+	background-color: #A1A4B0;
+	border-radius: 8px;
+}
+
+.ns_list_grouped {
+	list-style-type: none;
+	color: #141B5C;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: flex-start;
+	font-size: 16px;
+	font-weight: 700;
+	width: 100%;
+}
+
+.ns_group_category {
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	padding: 10px 8px;
+}
+
+.ns_list_grouped li {
+	width: 100%;
+}
+
+.ns_group_item {
+	cursor: pointer;
+	padding: 6px 0 6px 24px;
+	font-size: 16px;
+	font-weight: 300;
+	color: #141B5C;
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+	display: inline-block;
+	transition: all 0.1s;
+}
+
+.ns_group_item:hover {
+	background-color: #B2BBD9;
+	font-weight: 700;
+}
+
+.ns_block {
+	display: block;
 }

package/src/components/NSListGrouped.tsx

@@ -1,120 +1,120 @@
-"use client"
-import { Component, createRef } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSListGrouped.module.css";
-
-export interface NSListGroupedProps extends IBaseComponentProps
-{
-	groups: NSListGroupedProps_Group[];
-	onClick: (group: string, item: string) => void;
-}
-
-export interface NSListGroupedProps_Group
-{
-	name: string;
-	text: string;
-	items: NSListGroupedProps_Item[];
-}
-
-export interface NSListGroupedProps_Item
-{
-	name: string;
-	text: string;
-	text_bold?: string;
-	description?: string;
-}
-
-interface NSListGroupedState
-{
-	isVisible: boolean;
-}
-
-export class NSListGrouped extends Component<NSListGroupedProps, NSListGroupedState>
-{
-	private groupListRef = createRef<HTMLDivElement>();
-
-	constructor(props: NSListGroupedProps) 
-	{
-		super(props);
-		this.state = {
-			isVisible: true,
-		};
-		this.handleClickOutside = this.handleClickOutside.bind(this);
-		this.hide = this.hide.bind(this);
-		this.show = this.show.bind(this);
-	}
-
-	override componentDidMount() 
-	{
-		document.addEventListener('mousedown', this.handleClickOutside);
-	}
-
-	override componentWillUnmount()
-	{
-		document.removeEventListener('mousedown', this.handleClickOutside);
-	}
-
-	handleClickOutside(event: MouseEvent)
-	{
-		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
-		{
-			this.hide();
-		}
-	}
-
-	hide()
-	{
-		this.setState({ isVisible: false });
-	}
-
-	show()
-	{
-		this.setState({ isVisible: true }, () => { });
-	}
-
-	override render()
-	{
-		if (!this.state.isVisible)
-		{
-			return null;
-		}
-
-		return (
-			<div
-				ref={this.groupListRef}
-				id={this.props.id}
-				className={`${Styles.ns_list_grouped_parent} ${this.props.classList?.join(" ")}`}
-				style={this.props.style ?? {}}
-			>
-				{
-					this.props.groups.map((group, index) => (
-						<ul key={`NSListGrouped_ul_key_${index}`} className={Styles.ns_list_grouped}>
-							<div className='d-flex w-100 justify-content-between align-items-center'>
-								<span className={Styles.ns_group_category}>{group.text}
-									<img
-										onClick={this.hide}
-										src="https://static.namirasoft.com/image/concept/close/blue.svg"
-										alt="input-icon"
-										width={24}
-										height={24}
-									/>
-								</span>
-							</div>
-							{group.items.map((item) => (
-								<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group.name, item.name)}>
-									<div className={Styles.ns_group_item}>
-										<span>{item.text && <span>{item.text}</span>}</span>
-										<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
-											<b> {item.text_bold}</b>
-										</span>
-										{item.description && <span className={Styles.ns_block}>{item.description}</span>}
-									</div>
-								</li>
-							))}
-						</ul>
-					))
-				}
-			</div>
-		);
-	}
+"use client"
+import { Component, createRef } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSListGrouped.module.css";
+
+export interface NSListGroupedProps extends IBaseComponentProps
+{
+	groups: NSListGroupedProps_Group[];
+	onClick: (group: string, item: string) => void;
+}
+
+export interface NSListGroupedProps_Group
+{
+	name: string;
+	text: string;
+	items: NSListGroupedProps_Item[];
+}
+
+export interface NSListGroupedProps_Item
+{
+	name: string;
+	text: string;
+	text_bold?: string;
+	description?: string;
+}
+
+interface NSListGroupedState
+{
+	isVisible: boolean;
+}
+
+export class NSListGrouped extends Component<NSListGroupedProps, NSListGroupedState>
+{
+	private groupListRef = createRef<HTMLDivElement>();
+
+	constructor(props: NSListGroupedProps) 
+	{
+		super(props);
+		this.state = {
+			isVisible: true,
+		};
+		this.handleClickOutside = this.handleClickOutside.bind(this);
+		this.hide = this.hide.bind(this);
+		this.show = this.show.bind(this);
+	}
+
+	override componentDidMount() 
+	{
+		document.addEventListener('mousedown', this.handleClickOutside);
+	}
+
+	override componentWillUnmount()
+	{
+		document.removeEventListener('mousedown', this.handleClickOutside);
+	}
+
+	handleClickOutside(event: MouseEvent)
+	{
+		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
+		{
+			this.hide();
+		}
+	}
+
+	hide()
+	{
+		this.setState({ isVisible: false });
+	}
+
+	show()
+	{
+		this.setState({ isVisible: true }, () => { });
+	}
+
+	override render()
+	{
+		if (!this.state.isVisible)
+		{
+			return null;
+		}
+
+		return (
+			<div
+				ref={this.groupListRef}
+				id={this.props.id}
+				className={`${Styles.ns_list_grouped_parent} ${this.props.classList?.join(" ")}`}
+				style={this.props.style ?? {}}
+			>
+				{
+					this.props.groups.map((group, index) => (
+						<ul key={`NSListGrouped_ul_key_${index}`} className={Styles.ns_list_grouped}>
+							<div className='d-flex w-100 justify-content-between align-items-center'>
+								<span className={Styles.ns_group_category}>{group.text}
+									<img
+										onClick={this.hide}
+										src="https://static.namirasoft.com/image/concept/close/blue.svg"
+										alt="input-icon"
+										width={24}
+										height={24}
+									/>
+								</span>
+							</div>
+							{group.items.map((item) => (
+								<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group.name, item.name)}>
+									<div className={Styles.ns_group_item}>
+										<span>{item.text && <span>{item.text}</span>}</span>
+										<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
+											<b> {item.text_bold}</b>
+										</span>
+										{item.description && <span className={Styles.ns_block}>{item.description}</span>}
+									</div>
+								</li>
+							))}
+						</ul>
+					))
+				}
+			</div>
+		);
+	}
 }

package/src/components/NSListProduct.tsx

@@ -1,45 +1,45 @@
-import { useState, useEffect } from "react";
-import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
-import { NSCard } from "./NSCard";
-import { EnvService } from 'namirasoft-core'
-import { NSSection } from "./NSSection";
-
-export interface NSListProductProps 
-{
-    scope: string;
-    name: string;
-}
-
-interface NSListProductState
-{
-    products: ProductFullRow[];
-}
-
-export function NSListProduct(props: NSListProductProps)
-{
-    const [state, setState] = useState<NSListProductState>({ products: [] });
-
-    useEffect(() =>
-    {
-        let REACT_APP_BASE_URL_API_PRODUCT = new EnvService("REACT_APP_BASE_URL_API_PRODUCT", true).getString();
-        let server = new NamirasoftAPIProductServer(REACT_APP_BASE_URL_API_PRODUCT, () => { });
-        server.filter.ListProducts(props.scope, props.name, null, null, null, []).then((products) =>
-        {
-            setState({ products: products.rows });
-        }).catch(() => { });
-
-    }, [props]);
-
-    return (
-        <NSSection style={{ gap: "16px" }}>
-            {
-                state.products.map((product: ProductFullRow) =>
-                {
-                    return (
-                        <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
-                    );
-                })
-            }
-        </NSSection>
-    );
+import { useState, useEffect } from "react";
+import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
+import { NSCard } from "./NSCard";
+import { EnvService } from 'namirasoft-core'
+import { NSSection } from "./NSSection";
+
+export interface NSListProductProps 
+{
+    scope: string;
+    name: string;
+}
+
+interface NSListProductState
+{
+    products: ProductFullRow[];
+}
+
+export function NSListProduct(props: NSListProductProps)
+{
+    const [state, setState] = useState<NSListProductState>({ products: [] });
+
+    useEffect(() =>
+    {
+        let REACT_APP_BASE_URL_API_PRODUCT = new EnvService("REACT_APP_BASE_URL_API_PRODUCT", true).getString();
+        let server = new NamirasoftAPIProductServer(REACT_APP_BASE_URL_API_PRODUCT, () => { });
+        server.filter.ListProducts(props.scope, props.name, null, null, null, []).then((products) =>
+        {
+            setState({ products: products.rows });
+        }).catch(() => { });
+
+    }, [props]);
+
+    return (
+        <NSSection style={{ gap: "16px" }}>
+            {
+                state.products.map((product: ProductFullRow) =>
+                {
+                    return (
+                        <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
+                    );
+                })
+            }
+        </NSSection>
+    );
 }

package/src/components/NSLoading.module.css

@@ -1,31 +1,31 @@
-.ns_loading_parent {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 0 auto;
-	padding: 48px 0;
-	color: rgba(20, 27, 92, 1);
-	gap: 16px;
-}
-
-.ns_loader {
-	margin: 16px 0;
-	width: 75px;
-	height: 75px;
-	border-radius: 50%;
-	padding: 1px;
-	background: conic-gradient(#0000 10%, #001664) content-box;
-	-webkit-mask:
-		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
-		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
-	-webkit-mask-composite: destination-in;
-	animation: s4 1s infinite steps(10);
-}
-
-@keyframes s4 {
-	to {
-		transform: rotate(1turn)
-	}
+.ns_loading_parent {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+	padding: 48px 0;
+	color: rgba(20, 27, 92, 1);
+	gap: 16px;
+}
+
+.ns_loader {
+	margin: 16px 0;
+	width: 75px;
+	height: 75px;
+	border-radius: 50%;
+	padding: 1px;
+	background: conic-gradient(#0000 10%, #001664) content-box;
+	-webkit-mask:
+		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
+		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+	-webkit-mask-composite: destination-in;
+	animation: s4 1s infinite steps(10);
+}
+
+@keyframes s4 {
+	to {
+		transform: rotate(1turn)
+	}
 }

package/src/components/NSLoading.tsx

@@ -1,20 +1,20 @@
-import Styles from './NSLoading.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSLoadingProps extends IBaseComponentProps
-{ }
-
-export function NSLoading(props: NSLoadingProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_loading_parent} ${props.classList?.join(" ")} `}
-			style={props.style}
-		>
-			<h5>Loading</h5>
-			<span className={Styles.ns_loader}></span>
-			<p>Please wait ...</p>
-		</div>
-	);
+import Styles from './NSLoading.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSLoadingProps extends IBaseComponentProps
+{ }
+
+export function NSLoading(props: NSLoadingProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_loading_parent} ${props.classList?.join(" ")} `}
+			style={props.style}
+		>
+			<h5>Loading</h5>
+			<span className={Styles.ns_loader}></span>
+			<p>Please wait ...</p>
+		</div>
+	);
 }