namirasoft-site-react 1.5.16 → 1.5.17

package/src/components/NSSectionCards.tsx

@@ -1,52 +1,52 @@
-import Styles from './NSSectionCards.module.css';
-import { NSTitle } from './NSTitle';
-import { NSCard, NSCardProps } from './NSCard';
-import { NSSection } from './NSSection';
-import { NSLinkBlue } from './NSLinkBlue';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from '../props/ILinkProps';
-
-export interface NSSectionCardsProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: {
-		text: string,
-		color?: string
-	};
-	button?: ILinkProps;
-	cards: NSCardProps[];
-}
-
-export function NSSectionCards(props: NSSectionCardsProps) 
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
-				{
-					props.title &&
-					<div className={Styles.ns_section_cards_title_container}>
-						<NSTitle title={props.title} />
-						{
-							props.description &&
-							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
-						}
-					</div>
-				}
-				<div className={` ${Styles.ns_card_container}`}>
-					{
-						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
-					}
-				</div>
-				{
-					props.button &&
-					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
-						<NSLinkBlue {...props.button} />
-					</div>
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionCards.module.css';
+import { NSTitle } from './NSTitle';
+import { NSCard, NSCardProps } from './NSCard';
+import { NSSection } from './NSSection';
+import { NSLinkBlue } from './NSLinkBlue';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from '../props/ILinkProps';
+
+export interface NSSectionCardsProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: {
+		text: string,
+		color?: string
+	};
+	button?: ILinkProps;
+	cards: NSCardProps[];
+}
+
+export function NSSectionCards(props: NSSectionCardsProps) 
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+				{
+					props.title &&
+					<div className={Styles.ns_section_cards_title_container}>
+						<NSTitle title={props.title} />
+						{
+							props.description &&
+							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
+						}
+					</div>
+				}
+				<div className={` ${Styles.ns_card_container}`}>
+					{
+						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
+					}
+				</div>
+				{
+					props.button &&
+					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
+						<NSLinkBlue {...props.button} />
+					</div>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionTiles.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/src/components/NSSectionTiles.tsx

@@ -1,26 +1,26 @@
-import Styles from './NSSectionTiles.module.css';
-import { NSTile, NSTileProps } from './NSTile';
-import { NSSection } from './NSSection';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSSectionTilesProps extends IBaseComponentProps
-{
-	title?: string;
-	tiles: NSTileProps[]
-}
-
-export function NSSectionTiles(props: NSSectionTilesProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-				{
-					props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionTiles.module.css';
+import { NSTile, NSTileProps } from './NSTile';
+import { NSSection } from './NSSection';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSSectionTilesProps extends IBaseComponentProps
+{
+	title?: string;
+	tiles: NSTileProps[]
+}
+
+export function NSSectionTiles(props: NSSectionTilesProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionTitle.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from 'react';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSSection } from './NSSection';
-import { NSTitle } from './NSTitle';
-
-export interface NSSectionTitleProps extends IBaseComponentProps
-{
-	title: string;
-	children: ReactNode
-}
-
-export function NSSectionTitle(props: NSSectionTitleProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSTitle title={props.title} />
-			{props.children}
-		</NSSection>
-	);
+import { ReactNode } from 'react';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSSection } from './NSSection';
+import { NSTitle } from './NSTitle';
+
+export interface NSSectionTitleProps extends IBaseComponentProps
+{
+	title: string;
+	children: ReactNode
+}
+
+export function NSSectionTitle(props: NSSectionTitleProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSTitle title={props.title} />
+			{props.children}
+		</NSSection>
+	);
 }

package/src/components/NSSortDialog.tsx

@@ -1,125 +1,125 @@
-import { BaseMetaColumn, BaseMetaTable, SortItem } from "namirasoft-core";
-import { Component, createRef } from "react";
-import { NSBoxBaseCombo } from "./NSBoxBaseCombo";
-import { NSBoxBoolean } from "./NSBoxBoolean";
-import { NSBoxCombo } from "./NSBoxCombo";
-import { NSButtonBlue } from "./NSButtonBlue";
-import { NSColumn } from "./NSColumn";
-import { NSDialog } from "./NSDialog";
-import { NSTitle } from "./NSTitle";
-import { TableColumnInfo } from "./NSTable";
-
-interface NSSortDialogProps
-{
-    sorts: SortItem[];
-    getColumns: () => TableColumnInfo[];
-    onCancel: () => void;
-    onApply: (sorts: SortItem[] | null) => void;
-}
-
-interface NSSortDialogState
-{
-    sortEnabled: boolean;
-}
-
-export class NSSortDialog extends Component<NSSortDialogProps, NSSortDialogState>
-{
-    private sortBoolRef = createRef<NSBoxBoolean>();
-    private sortColumnRef = createRef<NSBoxBaseCombo<TableColumnInfo>>();
-    private sortDirectionRef = createRef<NSBoxCombo>();
-
-    constructor(props: NSSortDialogProps)
-    {
-        super(props);
-        this.state = { sortEnabled: props.sorts.length > 0 };
-    }
-
-    private handleApply = () =>
-    {
-        if (!this.sortBoolRef.current?.getValueBool())
-        {
-            this.props.onApply(null);
-            return;
-        }
-        const column = this.sortColumnRef.current?.getDataOne();
-        const direction = this.sortDirectionRef.current?.getValueOne();
-        if (column)
-        {
-            const t = new BaseMetaTable(null, column.table.name, column.table.text);
-            const c = new BaseMetaColumn(t, column.name, column.text, "", true);
-            const sort = new SortItem(t, c, direction === "true");
-            this.props.onApply([sort]);
-        }
-        else
-            this.props.onApply(null);
-    };
-
-    override render()
-    {
-        const { sorts, getColumns, onCancel } = this.props;
-
-        return (
-            <NSDialog
-                center_dialog
-                closeButton={{ show: true }}
-                onClose={onCancel}
-            >
-                <NSTitle title="Sort" style={{ marginBottom: 0, fontSize: 24 }} />
-                <NSColumn classList={["align-items-center mt-3"]}>
-                    <NSBoxBoolean
-                        ref={this.sortBoolRef}
-                        required
-                        title="Sort"
-                        hideHeader={true}
-                        checked={sorts.length > 0}
-                        onChanged={box => this.setState({ sortEnabled: box.getValueBool(false) })}
-                    />
-                    <NSBoxBaseCombo<TableColumnInfo>
-                        ref={this.sortColumnRef}
-                        title="Column"
-                        required
-                        defaultValue={sorts[0]?.column.name}
-                        getItems={async () =>
-                        {
-                            const cs = getColumns();
-                            return { count: cs.length, rows: cs }
-                        }}
-                        getTitle={c => c.text}
-                        getValue={c => c.name}
-                        getSort={() => null}
-                        multiple={false}
-                        disabled={!this.state.sortEnabled}
-                        menu={{
-                            builtin: {
-                                copy: { enabled: false, getValue: () => "" }
-                            },
-                            items: []
-                        }}
-                    />
-                    <NSBoxCombo
-                        ref={this.sortDirectionRef}
-                        title="Direction"
-                        required
-                        defaultValue={sorts[0] ? String(sorts[0].ascending) : "true"}
-                        getOptions={() => [
-                            { value: "true", title: "Ascending" },
-                            { value: "false", title: "Descending" }
-                        ]}
-                        multiple={false}
-                        disabled={!this.state.sortEnabled}
-                        menu={{
-                            builtin: {
-                                copy: { enabled: false, getValue: () => "" }
-                            },
-                            items: []
-                        }}
-                    />
-                    <NSButtonBlue
-                        title="Apply"
-                        onClick={{ action: this.handleApply, showLoading: false }}
-                    />
-                </NSColumn>
-            </NSDialog>
-        );
-    }
+import { BaseMetaColumn, BaseMetaTable, SortItem } from "namirasoft-core";
+import { Component, createRef } from "react";
+import { NSBoxBaseCombo } from "./NSBoxBaseCombo";
+import { NSBoxBoolean } from "./NSBoxBoolean";
+import { NSBoxCombo } from "./NSBoxCombo";
+import { NSButtonBlue } from "./NSButtonBlue";
+import { NSColumn } from "./NSColumn";
+import { NSDialog } from "./NSDialog";
+import { NSTitle } from "./NSTitle";
+import { TableColumnInfo } from "./NSTable";
+
+interface NSSortDialogProps
+{
+    sorts: SortItem[];
+    getColumns: () => TableColumnInfo[];
+    onCancel: () => void;
+    onApply: (sorts: SortItem[] | null) => void;
+}
+
+interface NSSortDialogState
+{
+    sortEnabled: boolean;
+}
+
+export class NSSortDialog extends Component<NSSortDialogProps, NSSortDialogState>
+{
+    private sortBoolRef = createRef<NSBoxBoolean>();
+    private sortColumnRef = createRef<NSBoxBaseCombo<TableColumnInfo>>();
+    private sortDirectionRef = createRef<NSBoxCombo>();
+
+    constructor(props: NSSortDialogProps)
+    {
+        super(props);
+        this.state = { sortEnabled: props.sorts.length > 0 };
+    }
+
+    private handleApply = () =>
+    {
+        if (!this.sortBoolRef.current?.getValueBool())
+        {
+            this.props.onApply(null);
+            return;
+        }
+        const column = this.sortColumnRef.current?.getDataOne();
+        const direction = this.sortDirectionRef.current?.getValueOne();
+        if (column)
+        {
+            const t = new BaseMetaTable(null, column.table.name, column.table.text);
+            const c = new BaseMetaColumn(t, column.name, column.text, "", true);
+            const sort = new SortItem(t, c, direction === "true");
+            this.props.onApply([sort]);
+        }
+        else
+            this.props.onApply(null);
+    };
+
+    override render()
+    {
+        const { sorts, getColumns, onCancel } = this.props;
+
+        return (
+            <NSDialog
+                center_dialog
+                closeButton={{ show: true }}
+                onClose={onCancel}
+            >
+                <NSTitle title="Sort" style={{ marginBottom: 0, fontSize: 24 }} />
+                <NSColumn classList={["align-items-center mt-3"]}>
+                    <NSBoxBoolean
+                        ref={this.sortBoolRef}
+                        required
+                        title="Sort"
+                        hideHeader={true}
+                        checked={sorts.length > 0}
+                        onChanged={box => this.setState({ sortEnabled: box.getValueBool(false) })}
+                    />
+                    <NSBoxBaseCombo<TableColumnInfo>
+                        ref={this.sortColumnRef}
+                        title="Column"
+                        required
+                        defaultValue={sorts[0]?.column.name}
+                        getItems={async () =>
+                        {
+                            const cs = getColumns();
+                            return { count: cs.length, rows: cs }
+                        }}
+                        getTitle={c => c.text}
+                        getValue={c => c.name}
+                        getSort={() => null}
+                        multiple={false}
+                        disabled={!this.state.sortEnabled}
+                        menu={{
+                            builtin: {
+                                copy: { enabled: false, getValue: () => "" }
+                            },
+                            items: []
+                        }}
+                    />
+                    <NSBoxCombo
+                        ref={this.sortDirectionRef}
+                        title="Direction"
+                        required
+                        defaultValue={sorts[0] ? String(sorts[0].ascending) : "true"}
+                        getOptions={() => [
+                            { value: "true", title: "Ascending" },
+                            { value: "false", title: "Descending" }
+                        ]}
+                        multiple={false}
+                        disabled={!this.state.sortEnabled}
+                        menu={{
+                            builtin: {
+                                copy: { enabled: false, getValue: () => "" }
+                            },
+                            items: []
+                        }}
+                    />
+                    <NSButtonBlue
+                        title="Apply"
+                        onClick={{ action: this.handleApply, showLoading: false }}
+                    />
+                </NSColumn>
+            </NSDialog>
+        );
+    }
 }

package/src/components/NSSpace.tsx

@@ -1,29 +1,29 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSSpaceProps extends IBaseComponentProps
-{
-	size: NSSpaceSizeType;
-}
-
-export enum NSSpaceSizeType
-{
-	NANO = "4px",
-	MICRO = "8px",
-	MINI = "16px",
-	SMALL = "24px",
-	MEDUIM = "32px",
-	NORMAL = "48px",
-	LARGE = "64px",
-	XLARGE = "80px",
-	XXLARGE = "96px",
-	XXXLARGE = "128px",
-}
-
-export function NSSpace(props: NSSpaceProps)
-{
-	return (
-		<hr id={props.id}
-			className={props.classList?.join(" ") ?? ""}
-			style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSSpaceProps extends IBaseComponentProps
+{
+	size: NSSpaceSizeType;
+}
+
+export enum NSSpaceSizeType
+{
+	NANO = "4px",
+	MICRO = "8px",
+	MINI = "16px",
+	SMALL = "24px",
+	MEDUIM = "32px",
+	NORMAL = "48px",
+	LARGE = "64px",
+	XLARGE = "80px",
+	XXLARGE = "96px",
+	XXXLARGE = "128px",
+}
+
+export function NSSpace(props: NSSpaceProps)
+{
+	return (
+		<hr id={props.id}
+			className={props.classList?.join(" ") ?? ""}
+			style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
+	);
 }

package/src/components/NSSplitter.module.css

@@ -1,60 +1,60 @@
-.ns_splitter_gutter {
-    display: none;
-}
-
-@media only screen and (min-width: 992px) {
-    .ns_splitter {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    .ns_splitter.ns_splitter_resizing,
-    .ns_splitter.ns_splitter_resizing * {
-        cursor: row-resize !important;
-        user-select: none !important;
-    }
-
-    .ns_splitter_master,
-    .ns_splitter_detail {
-        overflow: hidden;
-    }
-
-    .ns_splitter_gutter {
-        position: relative;
-        width: 100%;
-        outline: none;
-        border: none;
-        padding: 0.5rem 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: transparent;
-        cursor: row-resize !important;
-        z-index: 1
-    }
-
-    .ns_splitter_gutter::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 100%;
-        height: 0.25rem;
-        border-radius: 0.125rem;
-        background: #f0f0f0;
-        z-index: -1;
-    }
-
-    .ns_splitter_gutter_handle {
-        width: 2rem;
-        height: 0.5rem;
-        border-radius: 0.25rem;
-        background-color: #aaa;
-    }
-
-    .ns_splitter_gutter:hover .ns_splitter_gutter_handle {
-        background-color: #888;
-    }
+.ns_splitter_gutter {
+    display: none;
+}
+
+@media only screen and (min-width: 992px) {
+    .ns_splitter {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .ns_splitter.ns_splitter_resizing,
+    .ns_splitter.ns_splitter_resizing * {
+        cursor: row-resize !important;
+        user-select: none !important;
+    }
+
+    .ns_splitter_master,
+    .ns_splitter_detail {
+        overflow: hidden;
+    }
+
+    .ns_splitter_gutter {
+        position: relative;
+        width: 100%;
+        outline: none;
+        border: none;
+        padding: 0.5rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: transparent;
+        cursor: row-resize !important;
+        z-index: 1
+    }
+
+    .ns_splitter_gutter::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 100%;
+        height: 0.25rem;
+        border-radius: 0.125rem;
+        background: #f0f0f0;
+        z-index: -1;
+    }
+
+    .ns_splitter_gutter_handle {
+        width: 2rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background-color: #aaa;
+    }
+
+    .ns_splitter_gutter:hover .ns_splitter_gutter_handle {
+        background-color: #888;
+    }
 }