namirasoft-site-react 1.4.147 → 1.4.149

package/src/components/NSTag.module.css

@@ -1,53 +1,53 @@
-.ns_tag_container {
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    width: fit-content;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 48px;
-}
-
-.ns_tag_title {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: left;
-}
-
-.ns_tag_title h2 {
-    color: #141B5C;
-    font-weight: 600;
-    font-size: 24px;
-    margin: 0;
-}
-
-.ns_tag_title h6 {
-    color: rgb(68, 182, 243);
-    font-weight: 600;
-    font-size: 16px;
-    margin: 0;
-}
-
-.ns_tag_input_container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: left;
-    align-items: center;
-    gap: 16px;
-}
-
-.ns_tag_input_group {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    justify-content: center;
-    align-items: center;
-}
-
-@media only screen and (min-width:1100px) {
-    .ns_tag_input_group {
-        flex-direction: row;
-    }
+.ns_tag_container {
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    width: fit-content;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 48px;
+}
+
+.ns_tag_title {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: left;
+}
+
+.ns_tag_title h2 {
+    color: #141B5C;
+    font-weight: 600;
+    font-size: 24px;
+    margin: 0;
+}
+
+.ns_tag_title h6 {
+    color: rgb(68, 182, 243);
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0;
+}
+
+.ns_tag_input_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: left;
+    align-items: center;
+    gap: 16px;
+}
+
+.ns_tag_input_group {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    justify-content: center;
+    align-items: center;
+}
+
+@media only screen and (min-width:1100px) {
+    .ns_tag_input_group {
+        flex-direction: row;
+    }
 }

package/src/components/NSTag.tsx

@@ -1,79 +1,79 @@
-import { Component, createRef } from 'react';
-import { NSBoxString } from './NSBoxString';
-import { NSButton } from './NSButton';
-import Styles from './NSTag.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSTagProps extends IBaseComponentProps
-{
-	onChanged?: (e: NSBoxString, callback?: () => void) => void; //todo: Is it correct ?
-	onDeleted?: () => void;
-}
-export interface NSTagValue
-{
-	name: string;
-	value: string;
-	description?: string;
-}
-
-export class NSTag extends Component<NSTagProps>
-{
-	static isEmpty(value: NSTagValue)
-	{
-		if (value.name || value.value || value.description)
-			return false
-		return true;
-	}
-
-	private NSBoxString_Key = createRef<NSBoxString>();
-	private NSBoxString_Value = createRef<NSBoxString>();
-	private NSBoxString_Description = createRef<NSBoxString>();
-
-	getValue(checkError: boolean = true): NSTagValue
-	{
-		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
-		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
-		let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
-		return {
-			name,
-			value,
-			description
-		};
-	}
-	setValue(value: NSTagValue, callback?: () => void)
-	{
-		this.NSBoxString_Key.current?.setValue(value.name, callback);
-		this.NSBoxString_Value.current?.setValue(value.value, callback);
-		this.NSBoxString_Description.current?.setValue(value.description ?? "", callback);
-	}
-	override render()
-	{
-		return (
-			<section
-				id={this.props.id}
-				className={`${Styles.ns_tag_input_container} ${this.props.classList?.join(" ")}`}
-				style={this.props.style ?? {}}
-			>
-				<div className={Styles.ns_tag_input_group}>
-					<NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
-					<NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
-					<NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
-					<NSButton
-						title='Remove'
-						onClick={() =>
-						{
-							if (this.props.onDeleted)
-								this.props.onDeleted();
-						}}
-						style={{
-							backgroundColor: "transparent",
-							border: "1px solid rgba(3, 119, 255, 1)",
-							width: "145px",
-							marginTop: "28px"
-						}}
-					/>
-				</div>
-			</section>
-		);
-	}
+import { Component, createRef } from 'react';
+import { NSBoxString } from './NSBoxString';
+import { NSButton } from './NSButton';
+import Styles from './NSTag.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSTagProps extends IBaseComponentProps
+{
+	onChanged?: (e: NSBoxString, callback?: () => void) => void; //todo: Is it correct ?
+	onDeleted?: () => void;
+}
+export interface NSTagValue
+{
+	name: string;
+	value: string;
+	description?: string;
+}
+
+export class NSTag extends Component<NSTagProps>
+{
+	static isEmpty(value: NSTagValue)
+	{
+		if (value.name || value.value || value.description)
+			return false
+		return true;
+	}
+
+	private NSBoxString_Key = createRef<NSBoxString>();
+	private NSBoxString_Value = createRef<NSBoxString>();
+	private NSBoxString_Description = createRef<NSBoxString>();
+
+	getValue(checkError: boolean = true): NSTagValue
+	{
+		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
+		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
+		let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
+		return {
+			name,
+			value,
+			description
+		};
+	}
+	setValue(value: NSTagValue, callback?: () => void)
+	{
+		this.NSBoxString_Key.current?.setValue(value.name, callback);
+		this.NSBoxString_Value.current?.setValue(value.value, callback);
+		this.NSBoxString_Description.current?.setValue(value.description ?? "", callback);
+	}
+	override render()
+	{
+		return (
+			<section
+				id={this.props.id}
+				className={`${Styles.ns_tag_input_container} ${this.props.classList?.join(" ")}`}
+				style={this.props.style ?? {}}
+			>
+				<div className={Styles.ns_tag_input_group}>
+					<NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
+					<NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
+					<NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
+					<NSButton
+						title='Remove'
+						onClick={() =>
+						{
+							if (this.props.onDeleted)
+								this.props.onDeleted();
+						}}
+						style={{
+							backgroundColor: "transparent",
+							border: "1px solid rgba(3, 119, 255, 1)",
+							width: "145px",
+							marginTop: "28px"
+						}}
+					/>
+				</div>
+			</section>
+		);
+	}
 }

package/src/components/NSTile.module.css

@@ -1,78 +1,78 @@
-.ns_entity_bar_item {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	/* align-items: flex-start; */
-	gap: 24px;
-	padding: 24px;
-	box-shadow: 0 2px 10px 4px #00000040;
-	width: 100%;
-	max-width: 304px;
-	border-radius: 24px;
-}
-
-.ns_entity_bar_image_container {
-	width: 100%;
-}
-
-.ns_entity_bar_image {
-	border-radius: 16px;
-	object-fit: cover;
-	width: 100% !important;
-	height: 100% !important;
-}
-
-.ns_entity_bar_details_container {
-	text-align: start;
-}
-
-.ns_entity_bar_image_title {
-	color: #001664;
-	font-size: 24px;
-	font-weight: 700;
-	font-family: inherit;
-	line-height: 24px;
-	margin-bottom: 16px;
-	text-align: start;
-}
-
-.ns_entity_bar_image_description {
-	color: #001664;
-	font-size: 16px;
-	font-weight: 400;
-	font-family: inherit;
-	line-height: 24px;
-	text-align: justify;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_entity_bar_item {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		/* align-items: flex-start; */
-		gap: 48px;
-		width: 100%;
-		max-width: 1170px;
-	}
-
-	.ns_entity_bar_details_container {
-		padding: 24px 0;
-		width: 68%;
-	}
-
-	.ns_entity_bar_image_container {
-		width: 30%;
-		max-width: 304px;
-	}
-
-	.ns_entity_bar_image_title {
-		font-size: 32px;
-		line-height: 32px;
-	}
-
-	.ns_entity_bar_image {
-		border-radius: 8px;
-	}
-
+.ns_entity_bar_item {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	/* align-items: flex-start; */
+	gap: 24px;
+	padding: 24px;
+	box-shadow: 0 2px 10px 4px #00000040;
+	width: 100%;
+	max-width: 304px;
+	border-radius: 24px;
+}
+
+.ns_entity_bar_image_container {
+	width: 100%;
+}
+
+.ns_entity_bar_image {
+	border-radius: 16px;
+	object-fit: cover;
+	width: 100% !important;
+	height: 100% !important;
+}
+
+.ns_entity_bar_details_container {
+	text-align: start;
+}
+
+.ns_entity_bar_image_title {
+	color: #001664;
+	font-size: 24px;
+	font-weight: 700;
+	font-family: inherit;
+	line-height: 24px;
+	margin-bottom: 16px;
+	text-align: start;
+}
+
+.ns_entity_bar_image_description {
+	color: #001664;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: inherit;
+	line-height: 24px;
+	text-align: justify;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_entity_bar_item {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		/* align-items: flex-start; */
+		gap: 48px;
+		width: 100%;
+		max-width: 1170px;
+	}
+
+	.ns_entity_bar_details_container {
+		padding: 24px 0;
+		width: 68%;
+	}
+
+	.ns_entity_bar_image_container {
+		width: 30%;
+		max-width: 304px;
+	}
+
+	.ns_entity_bar_image_title {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.ns_entity_bar_image {
+		border-radius: 8px;
+	}
+
 }

package/src/components/NSTile.tsx

@@ -1,28 +1,28 @@
-import Styles from './NSTile.module.css'
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IImageProps } from '../props/IImageProps';
-
-export interface NSTileProps extends IBaseComponentProps
-{
-	title: string;
-	description: string;
-	image: IImageProps;
-}
-
-export function NSTile(props: NSTileProps)
-{
-	return (
-		<article id={props.id}
-			className={`${Styles.ns_entity_bar_item} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			<figure className={Styles.ns_entity_bar_image_container}>
-				<img className={Styles.ns_entity_bar_image} {...props.image} alt='Entity Bar' width={256} height={256} />
-			</figure>
-			<div className={Styles.ns_entity_bar_details_container}>
-				<h3 className={Styles.ns_entity_bar_image_title}> {props.title} </h3>
-				<p className={Styles.ns_entity_bar_image_description} > {props.description} </p>
-			</div>
-		</article>
-	);
+import Styles from './NSTile.module.css'
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IImageProps } from '../props/IImageProps';
+
+export interface NSTileProps extends IBaseComponentProps
+{
+	title: string;
+	description: string;
+	image: IImageProps;
+}
+
+export function NSTile(props: NSTileProps)
+{
+	return (
+		<article id={props.id}
+			className={`${Styles.ns_entity_bar_item} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<figure className={Styles.ns_entity_bar_image_container}>
+				<img className={Styles.ns_entity_bar_image} {...props.image} alt='Entity Bar' width={256} height={256} />
+			</figure>
+			<div className={Styles.ns_entity_bar_details_container}>
+				<h3 className={Styles.ns_entity_bar_image_title}> {props.title} </h3>
+				<p className={Styles.ns_entity_bar_image_description} > {props.description} </p>
+			</div>
+		</article>
+	);
 }

package/src/components/NSTimelineMonthly.module.css

@@ -1,72 +1,72 @@
-.ns_time_line_monthly_card {
-	width: 72px;
-	border-radius: 4px;
-	background-color: #fff;
-	overflow: hidden;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-	box-shadow: 1px 0px 3px 1px #b2b2b2;
-}
-
-.ns_time_line_monthly_card_week_day {
-	background-color: #141B5C;
-	color: #fff;
-	margin: 0;
-	text-align: center;
-	padding: 8px;
-	/* margin-bottom: 4px; */
-}
-
-.ns_time_line_cards_hour {
-	color: #141B5C;
-}
-
-.ns_time_line_monthly_card_parent_chart {
-	width: 100%;
-	height: 30%;
-	background-color: #E0DFFF;
-	box-shadow: 1px 1px 2px 1px #6c6a6acc;
-}
-
-.ns_time_line_monthly_card_bar {
-	height: 100%;
-	/* background-color: #3B9D00; */
-	color: transparent;
-}
-
-.ns_time_line_monthly {
-	display: flex;
-	gap: 2px;
-	flex-direction: row;
-	width: max-content;
-}
-
-.ns_parent {
-	width: 100%;
-	max-width: 1150px;
-	overflow-x: scroll;
-	flex-direction: column;
-}
-
-.ns_parent::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_parent::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_parent::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-	position: sticky;
-	left: 0;
+.ns_time_line_monthly_card {
+	width: 72px;
+	border-radius: 4px;
+	background-color: #fff;
+	overflow: hidden;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	box-shadow: 1px 0px 3px 1px #b2b2b2;
+}
+
+.ns_time_line_monthly_card_week_day {
+	background-color: #141B5C;
+	color: #fff;
+	margin: 0;
+	text-align: center;
+	padding: 8px;
+	/* margin-bottom: 4px; */
+}
+
+.ns_time_line_cards_hour {
+	color: #141B5C;
+}
+
+.ns_time_line_monthly_card_parent_chart {
+	width: 100%;
+	height: 30%;
+	background-color: #E0DFFF;
+	box-shadow: 1px 1px 2px 1px #6c6a6acc;
+}
+
+.ns_time_line_monthly_card_bar {
+	height: 100%;
+	/* background-color: #3B9D00; */
+	color: transparent;
+}
+
+.ns_time_line_monthly {
+	display: flex;
+	gap: 2px;
+	flex-direction: row;
+	width: max-content;
+}
+
+.ns_parent {
+	width: 100%;
+	max-width: 1150px;
+	overflow-x: scroll;
+	flex-direction: column;
+}
+
+.ns_parent::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+	position: sticky;
+	left: 0;
 }