namirasoft-site-react 1.4.548 → 1.4.550

package/dist/components/NSTable.module.css

@@ -1,312 +1,321 @@
 .ns_table {
-	display: flex;
-	flex-direction: column;
-	overflow-x: auto;
-	color: rgba(20, 27, 92);
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+    color: rgba(20, 27, 92);
 }
 
 .ns_search_input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	position: relative;
-	z-index: -1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
 }
 
 .ns_search_input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	position: relative;
-	z-index: -1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
 }
 
 .ns_table thead {
-	display: none;
+    display: none;
 }
 
 .ns_table tr {
-	border-radius: 0px;
-	padding: 16px 8px;
-	display: block;
-	background-color: #fff;
-	transition: all 0.2s ease-in-out;
+    border-radius: 0px;
+    padding: 16px 8px;
+    display: block;
+    background-color: #fff;
+    transition: all 0.2s ease-in-out;
 }
 
 .ns_table tbody tr {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .ns_table td {
-	display: flex;
-	flex-direction: row;
-	gap: 16px;
-	margin: 8px;
-	padding: 8px 0;
-	font-size: 16px;
-	justify-content: left;
-	align-items: center;
-	color: #000;
-	height: max-content;
-	max-height: 3rem;
-	line-clamp: 2;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-	overflow-wrap: break-word;
-	word-break: break-word;
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin: 8px;
+    padding: 8px 0;
+    font-size: 16px;
+    justify-content: left;
+    align-items: center;
+    color: #000;
+    height: max-content;
+    max-height: 3rem;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .ns_table td::before {
-	content: attr(data-label);
-	font-weight: bold;
-	float: left;
-	min-width: 30%;
+    content: attr(data-label);
+    font-weight: bold;
+    float: left;
+    min-width: 30%;
 }
 
 .ns_tbody tr:nth-child(odd) {
-	background-color: #f5f5f5;
+    background-color: #f5f5f5;
 }
 
 .ns_tbody tr:nth-child(even) {
-	background-color: #ffffff;
+    background-color: #ffffff;
 }
 
 .ns_tbody tr:hover {
-	background-color: rgb(184, 190, 240, 0.32);
+    background-color: rgb(184, 190, 240, 0.32);
 }
 
 .ns_tbody tr.ns_selected {
-	background-color: rgb(184, 190, 240, 0.64);
+    background-color: rgb(184, 190, 240, 0.64);
 }
 
 .ns_table tfoot {
-	padding: 1rem 0 0;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+    padding: 1rem 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 /* Check Box */
 .ns_check_box {
-	width: 100%;
-	text-align: center;
+    width: 100%;
+    text-align: center;
 }
 
 .ns_check_box {
-	height: 24px;
-	width: 24px !important;
-	cursor: pointer;
+    height: 24px;
+    width: 24px !important;
+    cursor: pointer;
 }
 
 .ns_check_box:checked {
-	accent-color: #141B5C;
+    accent-color: #141B5C;
 }
 
 .ns_check_box_label {
-	display: block;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-	display: flex;
-	justify-content: left;
-	align-items: center;
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    justify-content: left;
+    align-items: center;
 }
 
 .ns_indeterminate:indeterminate {
-	border: 1px solid rgba(255, 148, 50, 1);
+    border: 1px solid rgba(255, 148, 50, 1);
 }
 
 .ns_indeterminate {
-	position: relative;
+    position: relative;
 }
 
 .ns_indeterminate::after {
-	content: "-";
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	border: 5px solid #fffbff;
-	color: #141b5c;
-	background: #141b5c;
+    content: "-";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border: 5px solid #fffbff;
+    color: #141b5c;
+    background: #141b5c;
+}
+
+.ns_tfoot_row,
+.ns_tfoot_cell {
+    display: contents !important;
+}
+
+.ns_tfoot_cell::before {
+    display: none !important;
 }
 
 /* Button Panel */
 .ns_button_panel {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	gap: 16px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: 16px;
 }
 
 @media screen and (max-width: 991px) {
-	.ns_table td {
-		width: auto;
-	}
+    .ns_table td {
+        width: auto;
+    }
 }
 
 @media screen and (min-width: 992px) {
-	.ns_table_wrapper {
-		position: relative;
-		height: 100%;
-	}
-
-	.ns_table {
-		height: 100%;
-		max-height: 33.625rem;
-		border-radius: 0.75rem;
-		justify-content: flex-start;
-		overflow: scroll auto;
-		background-color: #fff;
-		color: #000;
-	}
-
-	.ns_table tr {
-		min-width: fit-content;
-		margin: 0;
-		border: 1px solid transparent;
-		border-radius: 0;
-		padding: 4px 8px;
-		display: grid;
-		align-items: center;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-	}
-
-	.ns_table th {
-		margin: 8px;
-		padding: 0;
-		font-size: 16px;
-		font-weight: 500;
-		line-height: 1.5rem;
-		color: #fff;
-	}
-
-	.ns_table td {
-		align-items: flex-start;
-		line-height: 1.5rem;
-		text-align: left;
-	}
-
-	.ns_table td::before {
-		content: "";
-		float: left;
-		font-weight: bold;
-		min-width: unset;
-		display: none;
-	}
-
-	.ns_table thead {
-		position: sticky;
-		top: 0;
-		min-width: max-content;
-		display: block;
-	}
-
-	.ns_table thead tr {
-		background-color: rgba(20, 27, 92);
-	}
-
-	.ns_table tbody {
-		padding-bottom: 0.5rem;
-	}
-
-	.ns_table tbody tr.ns_selected,
-	.ns_table tbody tr.ns_last_selected {
-		border-color: rgba(20, 27, 92);
-	}
-
-	.ns_table tbody tr.ns_selected+tr,
-	.ns_table tbody tr.ns_last_selected+tr {
-		border-top-color: transparent;
-	}
-
-	.ns_table tfoot {
-		position: sticky;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		padding: 1rem;
-		flex-direction: row;
-		background-color: #fff;
-	}
-
-	.ns_table tfoot.padding_0 {
-		padding: 0;
-	}
-
-	.ns_check_box {
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-	}
-
-	.ns_checkbox_label {
-		justify-content: center;
-	}
-
-	.ns_table_scrollbar {
-		position: absolute;
-		left: 0;
-		width: 100%;
-		height: 0.5rem;
-		overflow: auto visible;
-		background-color: #efefef;
-	}
-
-	.ns_table_scrollbar.bottom-0 {
-		bottom: 0;
-	}
-
-	.ns_table_scrollbar_content {
-		height: 0.25rem;
-	}
-
-	.ns_table,
-	.ns_table_scrollbar {
-		&::-webkit-scrollbar {
-			width: 0.5rem;
-			height: 0.5rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			border-radius: 0.25rem;
-			background: #efefef;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			border-radius: 0.25rem;
-			background: #888;
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: #555;
-		}
-	}
-
-	.ns_table::-webkit-scrollbar {
-		height: 0;
-	}
-
-	.ns_table_scrollbar::-webkit-scrollbar {
-		width: 0;
-	}
+    .ns_table_wrapper {
+        position: relative;
+        height: 100%;
+    }
+
+    .ns_table {
+        height: 100%;
+        max-height: 33.625rem;
+        border-radius: 0.75rem;
+        justify-content: flex-start;
+        overflow: scroll auto;
+        background-color: #fff;
+        color: #000;
+    }
+
+    .ns_table tr {
+        min-width: fit-content;
+        margin: 0;
+        border: 1px solid transparent;
+        border-radius: 0;
+        padding: 4px 8px;
+        display: grid;
+        align-items: center;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+    }
+
+    .ns_table th {
+        margin: 8px;
+        padding: 0;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 1.5rem;
+        color: #fff;
+    }
+
+    .ns_table td {
+        align-items: flex-start;
+        line-height: 1.5rem;
+        text-align: left;
+    }
+
+    .ns_table td::before {
+        content: "";
+        float: left;
+        font-weight: bold;
+        min-width: unset;
+        display: none;
+    }
+
+    .ns_table thead {
+        position: sticky;
+        top: 0;
+        min-width: max-content;
+        display: block;
+    }
+
+    .ns_table thead tr {
+        background-color: rgba(20, 27, 92);
+    }
+
+    .ns_table tbody {
+        padding-bottom: 0.5rem;
+    }
+
+    .ns_table tbody tr.ns_selected,
+    .ns_table tbody tr.ns_last_selected {
+        border-color: rgba(20, 27, 92);
+    }
+
+    .ns_table tbody tr.ns_selected+tr,
+    .ns_table tbody tr.ns_last_selected+tr {
+        border-top-color: transparent;
+    }
+
+    .ns_table tfoot {
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 1rem;
+        flex-direction: row;
+        background-color: #fff;
+    }
+
+    .ns_table tfoot.padding_0 {
+        padding: 0;
+    }
+
+    .ns_check_box {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .ns_checkbox_label {
+        justify-content: center;
+    }
+
+    .ns_table_scrollbar {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 0.5rem;
+        overflow: auto visible;
+        background-color: #efefef;
+    }
+
+    .ns_table_scrollbar.bottom-0 {
+        bottom: 0;
+    }
+
+    .ns_table_scrollbar_content {
+        height: 0.25rem;
+    }
+
+    .ns_table,
+    .ns_table_scrollbar {
+        &::-webkit-scrollbar {
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+
+        &::-webkit-scrollbar-track {
+            border-radius: 0.25rem;
+            background: #efefef;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 0.25rem;
+            background: #888;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    }
+
+    .ns_table::-webkit-scrollbar {
+        height: 0;
+    }
+
+    .ns_table_scrollbar::-webkit-scrollbar {
+        width: 0;
+    }
 }
 
 @media screen and (min-width: 1024px) {
-	.ns_button_panel {
-		flex-wrap: nowrap;
-		justify-content: flex-end;
-		gap: 24px;
-	}
+    .ns_button_panel {
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        gap: 24px;
+    }
 }

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.4.548",
+    "version": "1.4.550",
     "author": "Amir Abolhasani",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/components/NSBoxBaseLayout.tsx

@@ -91,6 +91,11 @@ export class NSBoxBaseLayout extends React.Component<NSBoxBaseLayoutProps, NSBox
     {
         this.setState(() => ({ disabled }));
     }
+    override componentDidUpdate(prevProps: NSBoxBaseLayoutProps): void
+    {
+        if (prevProps.disabled !== this.props.disabled)
+            this.setState({ disabled: this.props.disabled ?? false });
+    }
     override render()
     {
         let value = this.props.getValue() ?? "";

package/src/components/NSBoxDateRange.tsx

@@ -24,14 +24,14 @@ export class NSBoxDateRange extends NSBoxDateRangeBase<NSBoxDateRangeProps>
         return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
     }
 
+    protected override normalizeValue(value: NSBoxDateRangeValue): NSBoxDateRangeValue
+    {
+        return { from: NSBoxDateRange.startOfDay(value.from), to: NSBoxDateRange.endOfDay(value.to) };
+    }
+
     override setValue(value: NSBoxDateRangeValue | null, callback?: () => void): void
     {
-        if (value)
-            value = {
-                from: NSBoxDateRange.startOfDay(value.from),
-                to: NSBoxDateRange.endOfDay(value.to)
-            };
-        super.setValue(value, callback);
+        super.setValue(value ? this.normalizeValue(value) : null, callback);
     }
 
     getError(): string | null
@@ -54,6 +54,8 @@ export class NSBoxDateRange extends NSBoxDateRangeBase<NSBoxDateRangeProps>
             { label: '1W', title: 'Last 1 Week', from: TimeOperation.weeksAgo(1, now), to: now },
             { label: '1M', title: 'Last 1 Month', from: TimeOperation.monthsAgo(1, now), to: now },
             { label: '3M', title: 'Last 3 Months', from: TimeOperation.monthsAgo(3, now), to: now },
+            { label: '6M', title: 'Last 6 Months', from: TimeOperation.monthsAgo(6, now), to: now },
+            { label: '1Y', title: 'Last Year', from: TimeOperation.yearsAgo(1, now), to: now },
         ];
     }
 

package/src/components/NSBoxDateRangeBase.module.css

@@ -5,12 +5,14 @@
 }
 
 .ns_preset_container {
+    margin-top: -8px;
+    padding-top: 8px;
     display: flex;
-    align-items: center;
+    justify-content: space-evenly;
     flex-wrap: nowrap;
-    margin: 0 0.5rem 0.5rem;
     border: 1px solid #d9d9d9;
-    border-radius: 6px;
+    border-top: none;
+    border-radius: 0 0 6px 6px;
     overflow-x: auto;
     overflow-y: hidden;
     background: white;
@@ -18,23 +20,6 @@
     scrollbar-color: #d9d9d9 transparent;
 }
 
-.ns_preset_container::-webkit-scrollbar {
-    height: 3px;
-}
-
-.ns_preset_container::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.ns_preset_container::-webkit-scrollbar-thumb {
-    background: #d9d9d9;
-    border-radius: 3px;
-}
-
-.ns_preset_container::-webkit-scrollbar-thumb:hover {
-    background: #bfbfbf;
-}
-
 .ns_preset_divider {
     width: 1px;
     height: 20px;
@@ -44,17 +29,16 @@
 
 .ns_preset_btn {
     flex-shrink: 0;
-    padding: 4px 10px;
+    padding: 4px 8px;
     border: none;
     background: transparent;
     color: #595959;
     cursor: pointer;
     font-size: 12px;
     font-weight: 500;
-    font-family: inherit;
-    transition: color 0.15s, background 0.15s;
     white-space: nowrap;
-    line-height: 1.4;
+    line-height: 16px;
+    transition: color 0.15s, background-color 0.15s;
 }
 
 .ns_preset_btn:hover {