namirasoft-site-react 1.4.403 → 1.4.404

package/src/components/NSTag.tsx

@@ -1,75 +1,75 @@
-import { Component, createRef } from 'react';
-import { NSBoxString } from './NSBoxString';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSRow } from './NSRow';
-
-export interface NSTagProps extends IBaseComponentProps
-{
-	onChanged?: (e: NSBoxString, callback?: () => void) => void;
-	onDeleted?: () => void;
-}
-export interface NSTagValue
-{
-	name: string;
-	value: string;
-}
-
-export class NSTag extends Component<NSTagProps>
-{
-	static isEmpty(value: NSTagValue | null)
-	{
-		if (value)
-			if (value.name || value.value)
-				return false
-		return true;
-	}
-
-	private NSBoxString_Key = createRef<NSBoxString>();
-	private NSBoxString_Value = createRef<NSBoxString>();
-
-	getValue(checkError: boolean = true): NSTagValue
-	{
-		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
-		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
-		return {
-			name,
-			value
-		};
-	}
-	setValue(value: NSTagValue | null, callback?: () => void)
-	{
-		this.NSBoxString_Key.current?.setValue(value?.name ?? "", callback);
-		this.NSBoxString_Value.current?.setValue(value?.value ?? "", callback);
-	}
-	override render()
-	{
-		return (
-			<NSRow
-				{...this.props}
-			>
-
-				<NSBoxString
-					ref={this.NSBoxString_Key}
-					title='Name'
-					required
-					onChanged={this.props.onChanged}
-				/>
-				<NSBoxString
-					ref={this.NSBoxString_Value}
-					title='Value'
-					required={false}
-					menu={{
-						builtin: {
-							delete: {
-								enabled: true,
-								onDelete: this.props.onDeleted ?? (() => { })
-							}
-						},
-						items: []
-					}}
-					onChanged={this.props.onChanged}
-				/>
-			</NSRow>
-		);
-	}
+import { Component, createRef } from 'react';
+import { NSBoxString } from './NSBoxString';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSRow } from './NSRow';
+
+export interface NSTagProps extends IBaseComponentProps
+{
+	onChanged?: (e: NSBoxString, callback?: () => void) => void;
+	onDeleted?: () => void;
+}
+export interface NSTagValue
+{
+	name: string;
+	value: string;
+}
+
+export class NSTag extends Component<NSTagProps>
+{
+	static isEmpty(value: NSTagValue | null)
+	{
+		if (value)
+			if (value.name || value.value)
+				return false
+		return true;
+	}
+
+	private NSBoxString_Key = createRef<NSBoxString>();
+	private NSBoxString_Value = createRef<NSBoxString>();
+
+	getValue(checkError: boolean = true): NSTagValue
+	{
+		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
+		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
+		return {
+			name,
+			value
+		};
+	}
+	setValue(value: NSTagValue | null, callback?: () => void)
+	{
+		this.NSBoxString_Key.current?.setValue(value?.name ?? "", callback);
+		this.NSBoxString_Value.current?.setValue(value?.value ?? "", callback);
+	}
+	override render()
+	{
+		return (
+			<NSRow
+				{...this.props}
+			>
+
+				<NSBoxString
+					ref={this.NSBoxString_Key}
+					title='Name'
+					required
+					onChanged={this.props.onChanged}
+				/>
+				<NSBoxString
+					ref={this.NSBoxString_Value}
+					title='Value'
+					required={false}
+					menu={{
+						builtin: {
+							delete: {
+								enabled: true,
+								onDelete: this.props.onDeleted ?? (() => { })
+							}
+						},
+						items: []
+					}}
+					onChanged={this.props.onChanged}
+				/>
+			</NSRow>
+		);
+	}
 }

package/src/components/NSTile.module.css

@@ -1,77 +1,77 @@
-.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: 0px;
-	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: 0px;
+	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;
 }

package/src/components/NSTimelineMonthly.tsx

@@ -1,45 +1,45 @@
-// todo move to its own probject: this is Timify
-
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { Color } from "../Color"
-import Styles from './NSTimelineMonthly.module.css';
-export interface NSdata
-{
-	title: string;
-	value: number;
-	percentage: number;
-}
-export interface NSTimelineMonthlyProps extends IBaseComponentProps
-{
-	data: NSdata[];
-	title?: string;
-}
-
-export function NSTimelineMonthly(props: NSTimelineMonthlyProps)
-{
-	function getPercentage(value: number): string
-	{
-		let percentage = (value * 100) / 24;
-		return percentage.toString() + "%";
-	}
-	return (
-		<>
-			<div className={`${Styles.ns_parent}  ${props.classList?.join(" ") ?? ""} `} style={props.style}>
-				<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-				<div className={Styles.ns_time_line_monthly}>
-					{
-						props.data.map((card, index) => (
-							<div className={Styles.ns_time_line_monthly_card} key={`NSTimelineMonthly_div_key_${index}`}>
-								<h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
-								<span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
-								<div className={Styles.ns_time_line_monthly_card_parent_chart}>
-									<div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
-								</div>
-							</div>
-						))
-					}
-				</div>
-			</div>
-		</>
-	);
+// todo move to its own probject: this is Timify
+
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { Color } from "../Color"
+import Styles from './NSTimelineMonthly.module.css';
+export interface NSdata
+{
+	title: string;
+	value: number;
+	percentage: number;
+}
+export interface NSTimelineMonthlyProps extends IBaseComponentProps
+{
+	data: NSdata[];
+	title?: string;
+}
+
+export function NSTimelineMonthly(props: NSTimelineMonthlyProps)
+{
+	function getPercentage(value: number): string
+	{
+		let percentage = (value * 100) / 24;
+		return percentage.toString() + "%";
+	}
+	return (
+		<>
+			<div className={`${Styles.ns_parent}  ${props.classList?.join(" ") ?? ""} `} style={props.style}>
+				<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+				<div className={Styles.ns_time_line_monthly}>
+					{
+						props.data.map((card, index) => (
+							<div className={Styles.ns_time_line_monthly_card} key={`NSTimelineMonthly_div_key_${index}`}>
+								<h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
+								<span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
+								<div className={Styles.ns_time_line_monthly_card_parent_chart}>
+									<div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
+								</div>
+							</div>
+						))
+					}
+				</div>
+			</div>
+		</>
+	);
 }

package/src/components/NSTitle.module.css

@@ -1,16 +1,16 @@
-.ns_title {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-	line-height: normal;
-	margin-bottom: 16px;
-	width: 100%;
-	text-align: center;
-	font-family: inherit;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_title {
-		font-size: 32px;
-	}
+.ns_title {
+	color: rgba(20, 27, 92, 1);
+	font-size: 24px;
+	font-weight: 700;
+	line-height: normal;
+	margin-bottom: 16px;
+	width: 100%;
+	text-align: center;
+	font-family: inherit;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_title {
+		font-size: 32px;
+	}
 }

package/src/components/NSTitle.tsx

@@ -1,20 +1,20 @@
-import Styles from './NSTitle.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSTitleProps extends IBaseComponentProps
-{
-	title: string;
-}
-
-export function NSTitle(props: NSTitleProps)
-{
-	return (
-		<h2
-			id={props.id}
-			className={`${Styles.ns_title} ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			{props.title}
-		</h2>
-	);
+import Styles from './NSTitle.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSTitleProps extends IBaseComponentProps
+{
+	title: string;
+}
+
+export function NSTitle(props: NSTitleProps)
+{
+	return (
+		<h2
+			id={props.id}
+			className={`${Styles.ns_title} ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			{props.title}
+		</h2>
+	);
 }