namirasoft-site-react 1.4.111 → 1.4.113

package/dist/components/NSPanel.module.css

@@ -1,47 +1,47 @@
-.ns_panel_grid {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-    justify-content: center;
-}
-
-.ns_panel_column {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 8px;
-    margin: 0 auto;
-    width: 100%;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_panel_column {
-        max-width: 700px;
-        min-width: 270px;
-    }
-
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-        min-width: 270px;
-        max-width: 610px;
-    }
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_panel_column {
-        width: max-content;
-    }
+.ns_panel_grid {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 16px;
+    margin: 0 auto;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+    justify-content: center;
+}
+
+.ns_panel_column {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    margin: 0 auto;
+    width: 100%;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_column {
+        max-width: 700px;
+        min-width: 270px;
+    }
+
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+        min-width: 270px;
+        max-width: 610px;
+    }
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_panel_column {
+        width: max-content;
+    }
 }

package/dist/components/NSRadioButton.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+export interface INSRadioButtonProps extends IBaseComponentProps, IValidationProps, IValidationStringProps {
+    title: string;
+    placeholder?: string;
+    defaultValue?: boolean;
+    isSelected?: boolean;
+    onChanged?: (e: NSRadioButton) => void;
+    onClick?: () => void;
+}
+export interface INSBoxBooleanState {
+    value: boolean;
+    error?: string;
+}
+export declare class NSRadioButton extends React.Component<INSRadioButtonProps, INSBoxBooleanState> {
+    constructor(props: INSRadioButtonProps);
+    getError(): string | null;
+    getValue(checkError?: boolean): boolean;
+    setValue(value: boolean): void;
+    private onClicked;
+    componentDidUpdate(prevProps: INSRadioButtonProps): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/NSRadioButton.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSRadioButton.module.css";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+export class NSRadioButton extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : false };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onClicked = this.onClicked.bind(this);
+    }
+    getError() {
+        return null;
+    }
+    getValue(checkError = true) {
+        if (checkError) {
+            let error = this.getError();
+            if (error) {
+                this.setState({ error });
+                throw new Error(error);
+            }
+        }
+        return this.state.value;
+    }
+    setValue(value) {
+        this.setState({ value }, () => {
+            if (this.props.onChanged)
+                this.props.onChanged(this);
+        });
+    }
+    onClicked() {
+        this.setValue(true);
+        if (this.props.onClick)
+            this.props.onClick();
+    }
+    componentDidUpdate(prevProps) {
+        var _a;
+        if (prevProps.isSelected !== this.props.isSelected) {
+            this.setValue((_a = this.props.isSelected) !== null && _a !== void 0 ? _a : false);
+        }
+    }
+    render() {
+        var _a;
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { id: this.props.id, className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("div", { className: Styles.ns_input_transparent, onClick: this.onClicked }), _jsxs("div", { className: Styles.ns_checkbox_parent, children: [_jsx("input", { type: "radio", name: this.props.name, className: Styles.ns_input, checked: this.state.value, onChange: () => { } }), _jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title] })] })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error, clearError: () => this.setState({ error: "" }) })] }));
+    }
+}
+//# sourceMappingURL=NSRadioButton.js.map

package/dist/components/NSRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSRadioButton.js","sourceRoot":"","sources":["../../src/components/NSRadioButton.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSRange.module.css

@@ -1,67 +1,67 @@
-.ns_range_parent {
-	width: 100%;
-	max-width: 1150px;
-}
-
-.ns_range_time_item {
-	z-index: 99;
-	text-align: center;
-	max-width: 48px;
-	display: inline-block;
-	height: 60px;
-	position: relative;
-	border-width: 1px;
-	border-color: #DCDCDC;
-	border-style: groove;
-}
-
-.ns_range_time_box_full {
-	background-color: #fff;
-	border-radius: 5px;
-	position: relative;
-	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-	overflow-x: scroll;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_range_time_line {
-	position: absolute;
-	height: 100%;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-}
-
-.ns_range_time_item span {
-	color: #141B5C;
-	width: 100%;
-	display: inline-block;
-	background-color: #DCDCDC;
-	border-bottom: 1px solid #DCDCDC;
-	font-weight: 500;
-}
-
-@media screen and (min-width: 992px) {
-	.ns_range_time_box_full {
-		overflow: hidden;
-	}
-
-	.ns_range_time_item {
-		width: 4.166666%;
-	}
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
+.ns_range_time_item {
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
+}
+
+.ns_range_time_box_full {
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_range_time_line {
+	position: absolute;
+	height: 100%;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+}
+
+.ns_range_time_item span {
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }

package/dist/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/dist/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/dist/components/NSSectionCards.module.css

@@ -1,39 +1,39 @@
-.ns_section_cards_holder {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-}
-
-.ns_section_cards_title_container {
-	margin-bottom: 32px;
-}
-
-.ns_card_container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 24px;
-	width: 100%;
-}
-
-.ns_section_cards_link_container {
-	margin-top: 48px;
-	width: 100%;
-	text-align: center;
-}
-
-.ns_description {
-	text-align: center;
-	font-style: normal;
-	font-weight: inherit;
-	font-size: 16px;
-	font-family: inherit;
-	line-height: inherit;
-	margin-bottom: 16px;
+.ns_section_cards_holder {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.ns_section_cards_title_container {
+	margin-bottom: 32px;
+}
+
+.ns_card_container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 24px;
+	width: 100%;
+}
+
+.ns_section_cards_link_container {
+	margin-top: 48px;
+	width: 100%;
+	text-align: center;
+}
+
+.ns_description {
+	text-align: center;
+	font-style: normal;
+	font-weight: inherit;
+	font-size: 16px;
+	font-family: inherit;
+	line-height: inherit;
+	margin-bottom: 16px;
 }

package/dist/components/NSTabPage.module.css

@@ -1,60 +1,60 @@
-.ns_tab_page_panel {
-    border-radius: 8px;
-    overflow: hidden;
-    background: #141B5C;
-    padding: 16px;
-    width: 100%;
-}
-
-.ns_tab_page_panel ul.ns_tab_page_titles_container {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    overflow-x: auto;
-}
-
-.ns_tab_page_panel li.ns_tab_page_title {
-    text-align: center;
-    padding: 0px 16px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    border-right: 1px solid #fff;
-    margin: 14px 0;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
-    border-right: none;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
-    background-color: #fff;
-    border-radius: 8px 8px 0 0;
-    color: #141B5C;
-    margin: 0;
-    padding: 14px 16px;
-    box-shadow: 0px 2px 2px 2px #141B5C;
-}
-
-.ns_tab_content_column {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    gap: 0;
-    border-right: 1px solid #ccc;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-}
-
-.ns_tab_content_grid {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    display: grid !important;
-    gap: 0;
-    border-right: 1px solid #ccc;
+.ns_tab_page_panel {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C;
+    padding: 16px;
+    width: 100%;
+}
+
+.ns_tab_page_panel ul.ns_tab_page_titles_container {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow-x: auto;
+}
+
+.ns_tab_page_panel li.ns_tab_page_title {
+    text-align: center;
+    padding: 0px 16px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    border-right: 1px solid #fff;
+    margin: 14px 0;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
+    border-right: none;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
+    background-color: #fff;
+    border-radius: 8px 8px 0 0;
+    color: #141B5C;
+    margin: 0;
+    padding: 14px 16px;
+    box-shadow: 0px 2px 2px 2px #141B5C;
+}
+
+.ns_tab_content_column {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    gap: 0;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow-y: auto;
+}
+
+.ns_tab_content_grid {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    display: grid !important;
+    gap: 0;
+    border-right: 1px solid #ccc;
 }

package/dist/components/NSTable.js

@@ -168,19 +168,12 @@ export class NSTable extends Component {
                 this.props.onRowClick(e, row);
         };
         let onCellClick = (e, cell) => {
-            let overided = false;
-            if (this.props.onCellClick) {
-                let res = this.props.onCellClick(e, cell);
-                if (res === undefined) {
-                    overided = true;
-                }
-                else {
-                    overided = res;
-                }
-            }
-            if (!overided) {
+            var _a;
+            let overided = cell.column.formatter.onclick_overrided;
+            if (this.props.onCellClick)
+                overided = (_a = this.props.onCellClick(e, cell)) !== null && _a !== void 0 ? _a : true;
+            if (!overided)
                 this.showModal(cell.formatted, cell.column.text);
-            }
         };
         let content;
         if (this.state.rows === null) {
@@ -193,7 +186,7 @@ export class NSTable extends Component {
             content = this.state.rows.map((rowValue, rowIndex) => {
                 let row = { index: rowIndex, value: rowValue };
                 return _jsxs("tr", { onClick: (e) => { onRowClick(e, row); }, children: [this.props.checkbox &&
-                            _jsx("td", { children: _jsx("label", { htmlFor: `checkbox_device_${this.props.getRowKey(row)}`, className: Styles.ns_checkbox_label, children: _jsx("input", { className: Styles.ns_td_input, id: `checkbox_device_${this.props.getRowKey(row)}`, type: "checkbox", checked: this.state.selectedIDs.includes(this.props.getRowKey(row)), onChange: (e) => {
+                            _jsx("td", { width: "40px", children: _jsx("label", { htmlFor: `checkbox_device_${this.props.getRowKey(row)}`, className: Styles.ns_checkbox_label, children: _jsx("input", { className: Styles.ns_td_input, id: `checkbox_device_${this.props.getRowKey(row)}`, type: "checkbox", checked: this.state.selectedIDs.includes(this.props.getRowKey(row)), onChange: (e) => {
                                             let selectedIDs = this.state.selectedIDs;
                                             let id = this.props.getRowKey(row);
                                             if (e.currentTarget.checked)
@@ -207,14 +200,14 @@ export class NSTable extends Component {
                                         } }) }) }), this.props.columns.map((column, index) => {
                             column.index = index + (this.props.checkbox ? 1 : 0);
                             let cell = getCellTableInfo(column, row);
-                            return (_createElement("td", Object.assign({ className: 'py-3' }, getColumnAttributes(column), { key: column.index, "data-label": `${column.text}: `, onClick: (e) => {
+                            return (_createElement("td", Object.assign({ className: 'py-3', width: column.formatter.width }, getColumnAttributes(column), { key: column.index, "data-label": `${column.text}: `, onClick: (e) => {
                                     onColumnClick(e, column);
                                     onCellClick(e, cell);
                                 } }), cell.formatted));
                         })] }, this.props.getRowKey(row));
             });
         }
-        return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsxs("tr", { children: [this.props.checkbox && _jsx("th", { className: Styles.ns_check_box, children: _jsx("label", { htmlFor: 'checkbox', className: Styles.ns_checkbox_label, children: _jsx("input", { className: `${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`, id: 'checkbox', type: 'checkbox', checked: this.getSelectedIDs().length > 0, onChange: this.toggleAllCheckboxes }) }) }), this.state.columns.map(column => _jsx("th", { className: "py-3", scope: "col", children: column.text }, column.name))] }) }), _jsx("tbody", { className: Styles.ns_tbody, children: content })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { ref: this.NSPagination, totalItems: this.state.totalItems, onPageChange: this.onPageChange }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
+        return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsxs("tr", { children: [this.props.checkbox && _jsx("th", { className: Styles.ns_check_box, style: { width: "40px" }, children: _jsx("label", { htmlFor: 'checkbox', className: Styles.ns_checkbox_label, children: _jsx("input", { className: `${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`, id: 'checkbox', type: 'checkbox', checked: this.getSelectedIDs().length > 0, onChange: this.toggleAllCheckboxes }) }) }), this.state.columns.map(column => _jsx("th", { scope: "col", className: "py-3", style: { width: column.formatter.width }, children: column.text }, column.name))] }) }), _jsx("tbody", { className: Styles.ns_tbody, children: content })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { ref: this.NSPagination, totalItems: this.state.totalItems, onPageChange: this.onPageChange }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
                                     _jsx(NSPageSelectionModal, { icon: this.state.pageSelectionMode === PageSelectionMode.Print ? "https://static.namirasoft.com/image/concept/print/blue.svg" :
                                             this.state.pageSelectionMode === PageSelectionMode.CSV ? "https://static.namirasoft.com/image/concept/export/blue.svg" : "", current_page: 1, max_page: 1, getItems: (page, selected) => __awaiter(this, void 0, void 0, function* () {
                                             var _a, _b;