namirasoft-site-react 1.4.560 → 1.4.562

package/dist/components/NSBoxTime.d.ts

@@ -19,5 +19,5 @@ export declare class NSBoxTime extends React.Component<NSBoxTimeProps, NSBoxTime
     getValue(checkError?: boolean): string | null;
     setValue(value: string | null, callback?: () => void): void;
     setDisabled(disabled: boolean): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSBoxTime.module.css

@@ -1,5 +1,5 @@
-input[type="time"]::-webkit-calendar-picker-indicator {
-	cursor: pointer;
-	opacity: 0;
-	padding-right: 0px;
+input[type="time"]::-webkit-calendar-picker-indicator {
+	cursor: pointer;
+	opacity: 0;
+	padding-right: 0px;
 }

package/dist/components/NSBoxTimeRange.d.ts

@@ -28,5 +28,5 @@ export declare class NSBoxTimeRange extends Component<NSBoxTimeRangeProps, NSBox
     private toDayjsValue;
     private getBuiltinPresets;
     private renderPresets;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSBoxTimeZone.d.ts

@@ -18,5 +18,5 @@ export declare class NSBoxTimeZone extends Component<NSBoxTimeZoneProps, NSBoxTi
     setValue(value: string | null, callback?: () => void): void;
     setDisabled(disabled: boolean): void;
     private getOptions;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSBoxURL.d.ts

@@ -18,5 +18,5 @@ export declare class NSBoxURL extends React.Component<NSBoxURLProps, NSBoxURLSta
     getValue(checkError?: boolean): string | null;
     setValue(value: string | null, callback?: () => void): void;
     setDisabled(disabled: boolean): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSBoxVersion.d.ts

@@ -18,5 +18,5 @@ export declare class NSBoxVersion extends React.Component<NSBoxVersionProps, NSB
     getValue(checkError?: boolean): string | null;
     setValue(value: string | null, callback?: () => void): void;
     setDisabled(disabled: boolean): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSButton.module.css

@@ -1,58 +1,58 @@
-.ns_button,
-.ns_button_disabled {
-    background-color: transparent;
-    border-radius: 8px;
-    color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 600;
-    height: 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    width: 100%;
-    transition: all 0.2s ease-in-out;
-    border: 0;
-}
-
-.ns_button_disabled {
-    background-color: #A9A9A9 !important;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%), inset 0 4px 4px 0px rgba(255, 255, 255, 0.25) !important;
-    color: #fff !important;
-    cursor: not-allowed !important;
-}
-
-.ns_button:hover {
-    box-shadow: 0 0 10px 2px rgba(119, 117, 117, 0.4);
-    scale: 1.02;
-}
-
-.ns_button:focus-visible {
-    border-color: rgba(0, 0, 0, 1) !important;
-    outline: solid 1px #4096ff !important;
-}
-
-@media only screen and (min-width: 480px) {
-
-    .ns_button,
-    .ns_button_disabled {
-        width: 272px;
-    }
-}
-
-/* @media only screen and (min-width: 480px) {
-
-    .ns_button,
-    .ns_button_disabled {
-        width: 180px;
-    }
-}
-
-@media only screen and (min-width: 768px) {
-
-    .ns_button,
-    .ns_button_disabled {
-        width: 272px;
-    }
+.ns_button,
+.ns_button_disabled {
+    background-color: transparent;
+    border-radius: 8px;
+    color: rgba(20, 27, 92, 1);
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    width: 100%;
+    transition: all 0.2s ease-in-out;
+    border: 0;
+}
+
+.ns_button_disabled {
+    background-color: #A9A9A9 !important;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%), inset 0 4px 4px 0px rgba(255, 255, 255, 0.25) !important;
+    color: #fff !important;
+    cursor: not-allowed !important;
+}
+
+.ns_button:hover {
+    box-shadow: 0 0 10px 2px rgba(119, 117, 117, 0.4);
+    scale: 1.02;
+}
+
+.ns_button:focus-visible {
+    border-color: rgba(0, 0, 0, 1) !important;
+    outline: solid 1px #4096ff !important;
+}
+
+@media only screen and (min-width: 480px) {
+
+    .ns_button,
+    .ns_button_disabled {
+        width: 272px;
+    }
+}
+
+/* @media only screen and (min-width: 480px) {
+
+    .ns_button,
+    .ns_button_disabled {
+        width: 180px;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+
+    .ns_button,
+    .ns_button_disabled {
+        width: 272px;
+    }
 } */

package/dist/components/NSButtonBlue.d.ts

@@ -4,5 +4,5 @@ export declare class NSButtonBlue extends React.Component<NSButtonProps> {
     private NSButton_Base;
     constructor(props: NSButtonProps);
     performClick(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSButtonBlue.module.css

@@ -1,5 +1,5 @@
-.ns_button_blue {
-    background-color: rgba(3, 119, 255, 1);
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
-	color: #fff !important;
+.ns_button_blue {
+    background-color: rgba(3, 119, 255, 1);
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
+	color: #fff !important;
 }

package/dist/components/NSButtonGreen.d.ts

@@ -4,5 +4,5 @@ export declare class NSButtonGreen extends React.Component<NSButtonProps> {
     private NSButton_Base;
     constructor(props: NSButtonProps);
     performClick(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSButtonGreen.module.css

@@ -1,5 +1,5 @@
-.ns_button_green {
-    background-color: #06D182;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff !important;
+.ns_button_green {
+    background-color: #06D182;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff !important;
 }

package/dist/components/NSButtonRed.d.ts

@@ -4,5 +4,5 @@ export declare class NSButtonRed extends React.Component<NSButtonProps> {
     private NSButton_Base;
     constructor(props: NSButtonProps);
     performClick(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSButtonRed.module.css

@@ -1,5 +1,5 @@
-.ns_button_red {
-    background-color: #FF3F3F;
-    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff;
+.ns_button_red {
+    background-color: #FF3F3F;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+	color: #fff;
 }

package/dist/components/NSCard.d.ts

@@ -11,4 +11,4 @@ export interface NSCardProps extends IBaseComponentProps {
     image?: IImageProps;
     link: NSLinkProps;
 }
-export declare function NSCard(props: NSCardProps): import("react").JSX.Element;
+export declare function NSCard(props: NSCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSCard.module.css

@@ -1,114 +1,114 @@
-.ns_card {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	/* gap: 24px 0; */
-	background-color: #fff;
-	box-shadow: 0 2px 10px 4px #00000040;
-	border-radius: 24px;
-	max-width: 310px;
-	position: relative;
-}
-
-.ns_card_detail_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 16px;
-	color: #001664;
-	width: 100%;
-	height: 100%;
-	padding: 24px;
-	text-decoration: none;
-}
-
-.ns_card_title_img {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 8px;
-	width: 100%;
-}
-
-.ns_card_img {
-	border-radius: 16px;
-	object-fit: cover;
-	width: 128px;
-	height: 128px;
-}
-
-.ns_card_title {
-	font-style: inherit;
-	font-size: 24px;
-	font-weight: 700;
-	font-family: inherit;
-	line-height: normal;
-	text-align: center;
-	width: 100%;
-	color: inherit;
-	margin-bottom: 0;
-}
-
-.ns_card_headline {
-	font-style: normal;
-	font-size: 18px;
-	font-weight: 500;
-	font-family: inherit;
-	line-height: normal;
-	text-align: justify;
-	color: inherit;
-}
-
-.ns_card_description {
-	font-style: normal;
-	font-size: 16px;
-	font-weight: 400;
-	font-family: inherit;
-	line-height: normal;
-	text-align: justify;
-	color: inherit;
-	margin-bottom: 0;
-}
-
-.ns_card_link {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 12px 24px;
-	background-color: #3963FF;
-	box-shadow: inset 2px 2px 2px 0 #1754F3;
-	color: #fff;
-	font-weight: 400;
-	font-style: inherit;
-	line-height: normal;
-	border-radius: 24px;
-	width: 100%;
-	max-width: 272px;
-	margin-top: 24px;
-}
-
-.ns_card_link_container {
-	width: 100%;
-}
-
-
-@media only screen and (min-width: 576px) {
-	.ns_card {
-		width: 65%;
-	}
-}
-
-@media only screen and (min-width: 768px) {
-	.ns_card {
-		width: 41%;
-	}
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_card {
-		width: 25%;
-	}
+.ns_card {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	/* gap: 24px 0; */
+	background-color: #fff;
+	box-shadow: 0 2px 10px 4px #00000040;
+	border-radius: 24px;
+	max-width: 310px;
+	position: relative;
+}
+
+.ns_card_detail_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	color: #001664;
+	width: 100%;
+	height: 100%;
+	padding: 24px;
+	text-decoration: none;
+}
+
+.ns_card_title_img {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 8px;
+	width: 100%;
+}
+
+.ns_card_img {
+	border-radius: 16px;
+	object-fit: cover;
+	width: 128px;
+	height: 128px;
+}
+
+.ns_card_title {
+	font-style: inherit;
+	font-size: 24px;
+	font-weight: 700;
+	font-family: inherit;
+	line-height: normal;
+	text-align: center;
+	width: 100%;
+	color: inherit;
+	margin-bottom: 0;
+}
+
+.ns_card_headline {
+	font-style: normal;
+	font-size: 18px;
+	font-weight: 500;
+	font-family: inherit;
+	line-height: normal;
+	text-align: justify;
+	color: inherit;
+}
+
+.ns_card_description {
+	font-style: normal;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: inherit;
+	line-height: normal;
+	text-align: justify;
+	color: inherit;
+	margin-bottom: 0;
+}
+
+.ns_card_link {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12px 24px;
+	background-color: #3963FF;
+	box-shadow: inset 2px 2px 2px 0 #1754F3;
+	color: #fff;
+	font-weight: 400;
+	font-style: inherit;
+	line-height: normal;
+	border-radius: 24px;
+	width: 100%;
+	max-width: 272px;
+	margin-top: 24px;
+}
+
+.ns_card_link_container {
+	width: 100%;
+}
+
+
+@media only screen and (min-width: 576px) {
+	.ns_card {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	.ns_card {
+		width: 41%;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_card {
+		width: 25%;
+	}
 }

package/dist/components/NSCardScreenshot.d.ts

@@ -5,4 +5,4 @@ export interface NSCardScreenshotProps extends IBaseComponentProps {
     timeSpent: string;
     onDelete: () => void;
 }
-export declare function NSCardScreenshot(props: NSCardScreenshotProps): import("react").JSX.Element;
+export declare function NSCardScreenshot(props: NSCardScreenshotProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSCardScreenshot.module.css

@@ -1,42 +1,42 @@
-.card_screenshot {
-    border: 1px solid #CBD7FF;
-    border-radius: 8px;
-    width: 100%;
-    max-width: 370px;
-    height: 266px;
-    padding: 8px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.card_screenshot_header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-	color: #141B5C,
-}
-
-.timeSpent {
-    font-size: 16px;
-    font-weight: 600;
-    color: #141B5C,
-}
-
-.deleteButton {
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-}
-
-.deleteButton img {
-    width: 100%;
-}
-
-.screenshot_imageSection img {
-    width: 100%;
-    object-fit: cover;
-    border-radius: 4px;
+.card_screenshot {
+    border: 1px solid #CBD7FF;
+    border-radius: 8px;
+    width: 100%;
+    max-width: 370px;
+    height: 266px;
+    padding: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.card_screenshot_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+	color: #141B5C,
+}
+
+.timeSpent {
+    font-size: 16px;
+    font-weight: 600;
+    color: #141B5C,
+}
+
+.deleteButton {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+}
+
+.deleteButton img {
+    width: 100%;
+}
+
+.screenshot_imageSection img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 4px;
 }

package/dist/components/{NSChartColumn.d.ts → NSChartBar.d.ts}

@@ -1,19 +1,23 @@
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
+export type NSChartBarMode = "grouped" | "stacked" | "percent";
 export interface DataSetItem {
     label: string;
     color?: string;
     data: number[];
 }
-export interface NSChartColumnProps extends IBaseComponentProps {
+export interface NSChartBarProps extends IBaseComponentProps {
     labels: string[];
     dataset: DataSetItem[];
     range: {
         min: number;
         max: number;
     };
+    xTitle?: string;
+    mode?: NSChartBarMode;
+    horizontal?: boolean;
     yGrid?: boolean;
     height?: number;
     width?: number;
     formatValue?: (value: number) => string;
 }
-export declare function NSChartColumn(props: NSChartColumnProps): import("react").JSX.Element;
+export declare function NSChartBar(props: NSChartBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSChartBar.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
+import { ColorOperation } from '../ColorOperation';
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+const toPercentDatasets = (dataset) => {
+    let totals = [];
+    dataset.forEach(item => item.data.forEach((value, index) => { var _a; return totals[index] = ((_a = totals[index]) !== null && _a !== void 0 ? _a : 0) + (value || 0); }));
+    return dataset.map(item => (Object.assign(Object.assign({}, item), { data: item.data.map((value, index) => totals[index] ? (value / totals[index]) * 100 : 0) })));
+};
+const prepareDatasets = (dataset, mode) => {
+    let stacked = mode === "stacked" || mode === "percent";
+    let source = mode === "percent" ? toPercentDatasets(dataset) : dataset;
+    return source.map((item, index) => {
+        var _a;
+        return ({
+            label: item.label,
+            data: item.data,
+            backgroundColor: (_a = item.color) !== null && _a !== void 0 ? _a : ColorOperation.at(index),
+            stack: stacked ? "stack" : `stack-${index}`,
+        });
+    });
+};
+;
+export function NSChartBar(props) {
+    var _a, _b, _c, _d;
+    let mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "grouped";
+    let stacked = mode === "stacked" || mode === "percent";
+    let percent = mode === "percent";
+    let horizontal = (_b = props.horizontal) !== null && _b !== void 0 ? _b : false;
+    const data = {
+        labels: props.labels,
+        datasets: prepareDatasets(props.dataset, mode)
+    };
+    const categoryScale = {
+        stacked: stacked,
+        ticks: {
+            font: { size: 12, weight: 400 },
+            color: '#141B5C',
+            maxRotation: horizontal ? 0 : 45,
+            minRotation: 0,
+        },
+        grid: { display: false },
+        border: { display: false },
+    };
+    const valueScale = {
+        stacked: stacked,
+        min: percent ? 0 : props.range.min,
+        max: percent ? 100 : props.range.max,
+        ticks: {
+            callback: function (value) {
+                if (percent)
+                    return value + "%";
+                return props.formatValue ? props.formatValue(value) : value;
+            },
+            font: { size: 12, weight: 400 },
+            color: '#141B5C',
+        },
+        grid: { display: props.yGrid, color: "#E6EEF5" },
+        border: { display: false },
+    };
+    const options = {
+        indexAxis: horizontal ? "y" : "x",
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                position: "bottom"
+            },
+            tooltip: {
+                enabled: true,
+                callbacks: {
+                    title: (items) => {
+                        var _a, _b;
+                        let label = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "";
+                        return props.xTitle ? `${props.xTitle}: ${label}` : label;
+                    },
+                    label: ({ dataset, raw }) => percent
+                        ? `${dataset.label}: ${raw.toFixed(1)}%`
+                        : `${dataset.label}: ${props.formatValue ? props.formatValue(raw) : raw}`,
+                },
+            },
+        },
+        scales: {
+            x: horizontal ? valueScale : categoryScale,
+            y: horizontal ? categoryScale : valueScale,
+        },
+    };
+    return (_jsx(Bar, { data: data, options: options, width: (_c = props.width) !== null && _c !== void 0 ? _c : 320, height: (_d = props.height) !== null && _d !== void 0 ? _d : 240 }));
+}
+;
+//# sourceMappingURL=NSChartBar.js.map