@etsoo/materialui 1.1.39 → 1.1.42

package/lib/AuditDisplay.d.ts

@@ -1,11 +1,11 @@
-import { AuditLineDto } from '@etsoo/appscript';
-import { Theme } from '@mui/material';
-import React, { CSSProperties } from 'react';
-import { ListMoreDisplayProps } from './ListMoreDisplay';
+import { AuditLineDto } from "@etsoo/appscript";
+import { Theme } from "@mui/material";
+import React, { CSSProperties } from "react";
+import { ListMoreDisplayProps } from "./ListMoreDisplay";
 /**
  * Audit display props
  */
-export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLineDto>, 'children'> {
+export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLineDto>, "children"> {
     /**
      * Get list item style callback
      */

package/lib/AuditDisplay.js

@@ -1,19 +1,19 @@
-import { Utils } from '@etsoo/shared';
-import { Button, Divider, Typography, useTheme } from '@mui/material';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
-import { ListMoreDisplay } from './ListMoreDisplay';
-import { ShowDataComparison } from './ShowDataComparison';
+import { Utils } from "@etsoo/shared";
+import { Button, Divider, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { ListMoreDisplay } from "./ListMoreDisplay";
+import { ShowDataComparison } from "./ShowDataComparison";
 // Get label
 const getLabel = (key) => {
     var _a;
-    return (_a = globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
+    return (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
 };
 // Format date
 const formatDate = (date) => {
-    if (typeof globalApp === 'undefined')
-        return date.toUTCString();
-    return globalApp.formatDate(date, 'ds');
+    if (globalApp)
+        return globalApp.formatDate(date, "ds");
+    return date.toUTCString();
 };
 /**
  * Audit display
@@ -24,28 +24,26 @@ export function AuditDisplay(props) {
     // Theme
     const theme = useTheme();
     // Title
-    var title = getLabel('dataComparison');
+    var title = getLabel("dataComparison");
     // Destruct
     const { getItemStyle = (index, theme) => ({
-        padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
-        background: index % 2 === 0
-            ? theme.palette.grey[100]
-            : theme.palette.grey[50]
+        padding: [theme.spacing(1.5), theme.spacing(1)].join(" "),
+        background: index % 2 === 0 ? theme.palette.grey[100] : theme.palette.grey[50]
     }), getColumnLabel, equalCheck, itemRenderer = (data) => {
         const { newData, oldData, changes = { newData: newData !== null && newData !== void 0 ? newData : {}, oldData: oldData !== null && oldData !== void 0 ? oldData : {} } } = data;
         return (React.createElement(React.Fragment, null,
             changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title, getColumnLabel, equalCheck), sx: {
                     marginLeft: theme.spacing(1),
                     marginTop: theme.spacing(-0.5),
-                    float: 'right'
+                    float: "right"
                 } }, title)),
             React.createElement(Typography, null, formatDate(data.creation) +
-                ', [' +
+                ", [" +
                 getLabel(data.action) +
-                '], ' +
+                "], " +
                 data.user)));
     }, headerTitle = (React.createElement(React.Fragment, null,
-        React.createElement(Typography, null, getLabel('audits')),
+        React.createElement(Typography, null, getLabel("audits")),
         React.createElement(Divider, null))), ...rest } = props;
     // Layout
     return (React.createElement(ListMoreDisplay, { headerTitle: headerTitle, ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));

package/lib/BridgeCloseButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IBridgeHost } from '@etsoo/appscript';
-import { BoxProps, IconButtonProps } from '@mui/material';
+import { IBridgeHost } from "@etsoo/appscript";
+import { BoxProps, IconButtonProps } from "@mui/material";
 /**
  * Bridge close button props
  */

package/lib/BridgeCloseButton.js

@@ -1,18 +1,17 @@
-import { BridgeUtils } from '@etsoo/appscript';
-import CloseIcon from '@mui/icons-material/Close';
-import { Box, IconButton } from '@mui/material';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
+import { BridgeUtils } from "@etsoo/appscript";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, IconButton } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 /**
  * Bridge close button
  * @param props Props
  * @returns Component
  */
 export function BridgeCloseButton(props) {
+    var _a;
     // Destruct
-    const { boxProps, onClick, title = typeof globalApp === 'undefined'
-        ? 'Close'
-        : globalApp.get('close'), validate, ...rest } = props;
+    const { boxProps, onClick, title = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("close")) !== null && _a !== void 0 ? _a : "Close", validate, ...rest } = props;
     // Host
     const host = BridgeUtils.host;
     if (host == null ||

package/lib/DataSteps.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
-import { InputDialogProps } from '@etsoo/react';
+import { TextFieldProps } from "@mui/material";
+import { InputDialogProps } from "@etsoo/react";
 /**
  * Data step
  */
-export type DataStep = Omit<InputDialogProps, 'callback'> & {
+export type DataStep = Omit<InputDialogProps, "callback"> & {
     /**
      * Callback
      */
@@ -13,7 +13,7 @@ export type DataStep = Omit<InputDialogProps, 'callback'> & {
 /**
  * Data collecting steps component props
  */
-export type DataStepsProps<T extends object> = Omit<TextFieldProps, 'InputProps' | 'onClick'> & {
+export type DataStepsProps<T extends object> = Omit<TextFieldProps, "InputProps" | "onClick"> & {
     /**
      * JSON value
      */

package/lib/DataSteps.js

@@ -1,13 +1,13 @@
-import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
-import CheckIcon from '@mui/icons-material/Check';
-import StartIcon from '@mui/icons-material/Start';
-import React from 'react';
-import { HBox } from './FlexBox';
-import { globalApp } from './app/ReactApp';
-import { MUGlobal } from './MUGlobal';
+import { Button, IconButton, InputAdornment, TextField } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
+import CheckIcon from "@mui/icons-material/Check";
+import StartIcon from "@mui/icons-material/Start";
+import React from "react";
+import { HBox } from "./FlexBox";
+import { globalApp } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Data collecting steps component
  * @param props Props
@@ -17,10 +17,13 @@ export function DataSteps(props) {
     var _a;
     // App
     const app = globalApp;
+    if (app == null) {
+        throw new Error("No globalApp");
+    }
     // Labels
-    const labels = app.getLabels('close', 'nextStep', 'previousStep', 'submit');
+    const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
     // Destruct
-    const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => '...', onValueChange, steps, value = '', ...rest } = props;
+    const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", ...rest } = props;
     // Shrink
     (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // Current index
@@ -74,9 +77,9 @@ export function DataSteps(props) {
     React.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
     }, [valueFormatter]);
-    return (React.createElement(TextField, { autoComplete: "new-password", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: 'pointer' } }, InputProps: {
+    return (React.createElement(TextField, { autoComplete: "new-password", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
             onKeyDown: (event) => {
-                if (event.key === 'Tab')
+                if (event.key === "Tab")
                     return;
                 cancelInput(event);
             },

package/lib/DataTable.d.ts

@@ -0,0 +1,33 @@
+import { GridCellModesModel, GridRowId, GridValidRowModel } from "@mui/x-data-grid";
+import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
+import React from "react";
+/**
+ * Data table selected cell params
+ */
+export interface DataTableSelectedCellParams {
+    id: GridRowId;
+    field: string;
+    index: number;
+}
+/**
+ * Data table props
+ */
+export type DataTableProps<R extends GridValidRowModel = any> = Omit<DataGridProps<R>, "disableColumnMenu"> & {
+    /**
+     * Cell selection handler
+     * @param params Params
+     * @returns Result
+     */
+    onCellSelection?: (params: DataTableSelectedCellParams) => void | false;
+    /**
+     * Toolbar creator
+     * @returns Toolbar
+     */
+    toolbarCreator?: (selectedCellParams: DataTableSelectedCellParams | null, setCellModesModel: React.Dispatch<React.SetStateAction<GridCellModesModel>>, cellModesModel: GridCellModesModel) => React.ReactElement;
+};
+/**
+ * Data table
+ * @param props Props
+ * @returns Component
+ */
+export declare function DataTable<R extends GridValidRowModel = any>(props: DataTableProps<R>): JSX.Element;

package/lib/DataTable.js

@@ -0,0 +1,56 @@
+import { DataGrid } from "@mui/x-data-grid";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+/**
+ * Data table
+ * @param props Props
+ * @returns Component
+ */
+export function DataTable(props) {
+    var _a;
+    // Destructor
+    const { localeText = {}, onCellSelection, toolbarCreator, ...rest } = props;
+    // Labels
+    const { noRows } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noRows")) !== null && _a !== void 0 ? _a : {};
+    if (noRows && !localeText.noRowsLabel)
+        localeText.noRowsLabel = noRows;
+    const [selectedCellParams, setSelectedCellParams] = React.useState(null);
+    const [cellModesModel, setCellModesModel] = React.useState({});
+    const handleCellFocus = React.useCallback((event) => {
+        // event.target is the element that triggered the event
+        // event.currentTarget is the element that the event listener is attached to
+        const cell = event.currentTarget;
+        const row = cell.parentElement;
+        if (row == null)
+            return;
+        const id = row.dataset.id;
+        const index = row.dataset.rowindex;
+        const field = cell.dataset.field;
+        if (id == null || index == null || field == null)
+            return;
+        const params = {
+            id,
+            field,
+            index: parseInt(index)
+        };
+        if (onCellSelection) {
+            if (onCellSelection(params) === false)
+                return;
+        }
+        setSelectedCellParams(params);
+    }, []);
+    return (React.createElement(DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), components: {
+            Toolbar: toolbarCreator
+                ? ({ selectedCellParams, setCellModesModel, cellModesModel }) => toolbarCreator(selectedCellParams, setCellModesModel, cellModesModel)
+                : undefined
+        }, componentsProps: {
+            toolbar: {
+                selectedCellParams,
+                setCellModesModel,
+                cellModesModel
+            },
+            cell: {
+                onFocus: handleCellFocus
+            }
+        }, ...rest }));
+}

package/lib/ListMoreDisplay.d.ts

@@ -1,11 +1,11 @@
-import { DataTypes } from '@etsoo/shared';
-import { CardProps } from '@mui/material';
-import React from 'react';
-import { GridData, GridLoader } from '@etsoo/react';
+import { DataTypes } from "@etsoo/shared";
+import { CardProps } from "@mui/material";
+import React from "react";
+import { GridData, GridLoader } from "@etsoo/react";
 /**
  * ListMoreDisplay props
  */
-export interface ListMoreDisplayProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<CardProps, 'children'>, GridLoader<T> {
+export interface ListMoreDisplayProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<CardProps, "children">, GridLoader<T> {
     /**
      * Batch size to load
      */

package/lib/ListMoreDisplay.js

@@ -1,8 +1,8 @@
-import { Card, CardActions, CardContent, CardHeader, CircularProgress } from '@mui/material';
-import React from 'react';
-import { GridDataGet } from '@etsoo/react';
-import { LoadingButton } from './LoadingButton';
-import { globalApp } from './app/ReactApp';
+import { Card, CardActions, CardContent, CardHeader, CircularProgress } from "@mui/material";
+import React from "react";
+import { GridDataGet } from "@etsoo/react";
+import { LoadingButton } from "./LoadingButton";
+import { globalApp } from "./app/ReactApp";
 /**
  * ListMoreDisplay
  * @param props Props
@@ -10,9 +10,7 @@ import { globalApp } from './app/ReactApp';
  */
 export function ListMoreDisplay(props) {
     // Destruct
-    const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = typeof globalApp === 'undefined'
-        ? undefined
-        : globalApp.get('more') + '...', fieldTemplate, threshold, ...rest } = props;
+    const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = globalApp ? globalApp.get("more") + "..." : undefined, fieldTemplate, threshold, ...rest } = props;
     // Refs
     const refs = React.useRef({
         autoLoad,
@@ -95,8 +93,8 @@ export function ListMoreDisplay(props) {
             React.createElement(CardHeader, { title: headerTitle }),
             React.createElement(CardContent, { sx: {
                     paddingTop: 0,
-                    paddingBottom: states.completed ? 0 : 'inherit'
+                    paddingBottom: states.completed ? 0 : "inherit"
                 } }, states.items == null ? (React.createElement(CircularProgress, { size: 20 })) : (states.items.map((item, index) => children(item, index)))),
-            !states.completed && (React.createElement(CardActions, { sx: { justifyContent: 'flex-end' } },
+            !states.completed && (React.createElement(CardActions, { sx: { justifyContent: "flex-end" } },
                 React.createElement(LoadingButton, { onClick: async () => await loadDataLocal() }, moreLabel))))));
 }

package/lib/OptionBool.js

@@ -7,8 +7,9 @@ import { OptionGroup } from "./OptionGroup";
  * @returns Component
  */
 export function OptionBool(props) {
+    var _a;
     // Options
-    const options = globalApp.getBools();
+    const options = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getBools()) !== null && _a !== void 0 ? _a : [];
     // Layout
     return (React.createElement(OptionGroup, { options: options, row: true, multiple: false, ...props }));
 }

package/lib/SelectBool.js

@@ -8,10 +8,11 @@ import { SelectEx } from "./SelectEx";
  * @returns Component
  */
 export function SelectBool(props) {
+    var _a;
     // Destruct
     const { search = true, autoAddBlankItem = search, ...rest } = props;
     // Options
-    const options = globalApp.getBools();
+    const options = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getBools()) !== null && _a !== void 0 ? _a : [];
     if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout

package/lib/ShowDataComparison.d.ts

@@ -1,4 +1,4 @@
-import { AuditLineChangesDto } from '@etsoo/appscript';
+import { AuditLineChangesDto } from "@etsoo/appscript";
 /**
  * Check obj is instance of AuditLineChangesDto
  * @param obj Input

package/lib/ShowDataComparison.js

@@ -1,26 +1,26 @@
-import { NotificationMessageType } from '@etsoo/notificationbase';
-import { Utils } from '@etsoo/shared';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
+import { NotificationMessageType } from "@etsoo/notificationbase";
+import { Utils } from "@etsoo/shared";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 /**
  * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */
 export function IsAuditLineUpdateData(obj) {
-    return (typeof obj === 'object' &&
-        'oldData' in obj &&
-        typeof obj.oldData === 'object' &&
-        'newData' in obj &&
-        typeof obj.newData === 'object');
+    return (typeof obj === "object" &&
+        "oldData" in obj &&
+        typeof obj.oldData === "object" &&
+        "newData" in obj &&
+        typeof obj.newData === "object");
 }
 // Format value
 const formatValue = (value, app) => {
     if (value == null)
-        return '';
+        return "";
     if (value instanceof Date)
-        return app.formatDate(value, 'ds');
+        return app.formatDate(value, "ds");
     return `${value}`;
 };
 /**
@@ -31,10 +31,17 @@ const formatValue = (value, app) => {
  * @param equalCheck Equal check for properties
  */
 export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
-    modelTitle !== null && modelTitle !== void 0 ? modelTitle : (modelTitle = globalApp.get('dataComparison'));
+    // Validate app
+    const app = globalApp;
+    if (app == null) {
+        throw new Error("No globalApp");
+    }
+    // Labels
+    const { dataComparison, field, newValue, oldValue } = app.getLabels("dataComparison", "field", "newValue", "oldValue");
+    modelTitle !== null && modelTitle !== void 0 ? modelTitle : (modelTitle = dataComparison);
     getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (key) => {
         var _a;
-        return (_a = globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
+        return (_a = app.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
     });
     const keys = new Set([
         ...Object.keys(data.oldData),
@@ -50,12 +57,12 @@ export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true
     const inputs = (React.createElement(Table, null,
         React.createElement(TableHead, null,
             React.createElement(TableRow, null,
-                React.createElement(TableCell, { width: "18%" }, globalApp.get('field')),
-                React.createElement(TableCell, { width: "41%", align: "right" }, globalApp.get('oldValue')),
-                React.createElement(TableCell, { width: "41%", align: "right" }, globalApp.get('newValue')))),
+                React.createElement(TableCell, { width: "18%" }, field),
+                React.createElement(TableCell, { width: "41%", align: "right" }, oldValue),
+                React.createElement(TableCell, { width: "41%", align: "right" }, newValue))),
         React.createElement(TableBody, null, rows.map((row) => (React.createElement(TableRow, { key: row.field },
             React.createElement(TableCell, null, getLabel(row.field)),
-            React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue, globalApp)),
-            React.createElement(TableCell, { align: "right" }, formatValue(row.newValue, globalApp))))))));
-    globalApp.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
+            React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue, app)),
+            React.createElement(TableCell, { align: "right" }, formatValue(row.newValue, app))))))));
+    app.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
 };

package/lib/SwitchAnt.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SwitchProps } from '@mui/material/Switch';
+import { SwitchProps } from "@mui/material/Switch";
 /**
  * Ant style switch props
  */
@@ -11,11 +11,11 @@ export interface SwitchAntProps extends SwitchProps {
     /**
      * Start label
      */
-    startLabel: string;
+    startLabel?: string;
     /**
      * End label
      */
-    endLabel: string;
+    endLabel?: string;
 }
 /**
  * Ant style switch

package/lib/SwitchAnt.js

@@ -1,17 +1,20 @@
-import { Stack, Typography } from '@mui/material';
-import Switch from '@mui/material/Switch';
-import React from 'react';
+import { Stack, Typography } from "@mui/material";
+import Switch from "@mui/material/Switch";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 /**
  * Ant style switch
  * @param props Props
  * @returns Component
  */
 export function SwitchAnt(props) {
-    var _a;
+    var _a, _b;
+    // Labels
+    const { yes = "Yes", no = "No" } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("yes", "no")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { activeColor, checked, defaultChecked, defaultValue, endLabel, startLabel, onChange, value = 'true', ...rest } = props;
+    const { activeColor, checked, defaultChecked, defaultValue, endLabel = yes, startLabel = no, onChange, value = "true", ...rest } = props;
     // Checked state
-    const [controlChecked, setControlChecked] = React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : defaultValue == value);
+    const [controlChecked, setControlChecked] = React.useState((_b = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _b !== void 0 ? _b : defaultValue == value);
     // Ref
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -27,14 +30,14 @@ export function SwitchAnt(props) {
     // Layout
     return (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
         React.createElement(Typography, { onClick: () => { var _a; return controlChecked && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.click()); }, sx: {
-                cursor: 'pointer',
+                cursor: "pointer",
                 color: controlChecked
                     ? undefined
                     : (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
             } }, startLabel),
         React.createElement(Switch, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }),
         React.createElement(Typography, { onClick: () => { var _a; return !controlChecked && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.click()); }, sx: {
-                cursor: 'pointer',
+                cursor: "pointer",
                 color: controlChecked
                     ? (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
                     : undefined

package/lib/SwitchField.d.ts

@@ -0,0 +1,45 @@
+import { FormControlProps } from "@mui/material";
+import React from "react";
+/**
+ * SwitchField props
+ */
+export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+    /**
+     * Helper text
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Checked
+     */
+    checked?: boolean;
+    /**
+     * Active color
+     */
+    activeColor?: string;
+    /**
+     * Start label
+     */
+    startLabel?: string;
+    /**
+     * End label
+     */
+    endLabel?: string;
+    /**
+     * Height in px
+     */
+    height?: number;
+    /**
+     * Value, default is true
+     */
+    value?: unknown;
+};
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+export declare function SwitchField(props: SwitchFieldProps): JSX.Element;

package/lib/SwitchField.js

@@ -0,0 +1,33 @@
+import { Box, FormControl, FormHelperText, InputLabel } from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+import { SwitchAnt } from "./SwitchAnt";
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+export function SwitchField(props) {
+    // Destruct
+    const { activeColor, startLabel, endLabel, value = true, fullWidth, height = 56, helperText, label, name, required, sx = {}, checked, variant = "outlined", ...rest } = props;
+    // Outlined
+    const outlined = variant === "outlined";
+    if (sx) {
+        Object.assign(sx, { height: outlined ? `${height}px` : undefined });
+    }
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, sx: sx, ...rest },
+            label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
+            outlined && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, sx: {
+                    cursor: "default",
+                    position: "absolute",
+                    width: fullWidth ? "100%" : "auto",
+                    "& input": {
+                        visibility: "hidden"
+                    }
+                } })),
+            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
+                React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel !== null && startLabel !== void 0 ? startLabel : "NO", endLabel: endLabel !== null && endLabel !== void 0 ? endLabel : "YES", value: value, checked: checked }))),
+        helperText && React.createElement(FormHelperText, null, helperText)));
+}

package/lib/Tiplist.js

@@ -11,10 +11,11 @@ import { SearchField } from "./SearchField";
  * @returns Component
  */
 export function Tiplist(props) {
+    var _a;
     // Labels
-    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more");
+    const { noOptions, loading, more } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, getOptionLabel, getOptionDisabled, ...rest } = props;
+    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = noOptions, loadingText = loading, getOptionLabel, getOptionDisabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -160,11 +161,10 @@ export function Tiplist(props) {
                     return true;
                 return getOptionDisabled ? getOptionDisabled(item) : false;
             }, getOptionLabel: (item) => {
-                var _a;
                 if (typeof item !== "object")
                     return `${item}`;
                 if (item[idField] === "n/a")
-                    return ((_a = labels.more) !== null && _a !== void 0 ? _a : "More") + "...";
+                    return (more !== null && more !== void 0 ? more : "More") + "...";
                 return getOptionLabel
                     ? getOptionLabel(item)
                     : "label" in item