@olenbetong/synergi-react 2.1.2 → 2.3.0

package/es/elements/ElementDamage/DuplicateDamage/PhoneView.d.ts

@@ -0,0 +1,6 @@
+import type { DamagesRecord } from "../../data";
+type DuplicatePhoneViewItemProps = {
+    record: DamagesRecord;
+};
+export declare function DuplicatePhoneViewItem({ record }: DuplicatePhoneViewItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/DuplicateDamage/PhoneView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+export function DuplicatePhoneViewItem({ record }) {
+    return (_jsx(Card, { variant: "outlined", onClick: () => {
+            window.location.href = `${record.ID}`;
+        }, children: _jsxs(CardContent, { children: [_jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: record.Date.toLocaleDateString() }), _jsxs(Typography, { variant: "h5", mb: 1.5, children: [record.ElementID, " - ", record.DisplayName] }), _jsxs(Typography, { children: [getLocalizedString("Description"), ":"] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Description }), _jsxs(Typography, { children: [getLocalizedString("Cause"), ": "] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Cause }), _jsxs(Typography, { children: [getLocalizedString("Action"), ": "] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Action })] }) }));
+}

package/es/elements/ElementDamage/DuplicateDamage/index.d.ts

@@ -0,0 +1,36 @@
+import { type DamagesRecord } from "../../data";
+import type { Element } from "../../ElementLookup";
+export { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+export type DuplicateElementDamageHandle = {
+    onClose: () => void;
+    checkDuplicate: () => Promise<DamagesRecord[] | null>;
+    record: DamagesRecord[];
+};
+type DuplicateElementDamageProps = {
+    element: Element | null;
+    /**
+     * External control of dialog visibility
+     */
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    /**
+     * Skip duplicate checking (used in edit mode)
+     */
+    disableCheck?: boolean;
+    /**
+     * Loading state for submit button
+     */
+    loading?: boolean;
+    /**
+     * Called when duplicate or duplicates are found
+     * @param record Array with all of the duplicate damages
+     * @returns void
+     */
+    onDuplicateFound?: (record: DamagesRecord[]) => void;
+    /**
+     * Called when user presses register anyway in dialog
+     * @returns void
+     */
+    onRegisterAnyway?: () => void;
+};
+export declare const DuplicateElementDamage: import("react").ForwardRefExoticComponent<DuplicateElementDamageProps & import("react").RefAttributes<DuplicateElementDamageHandle>>;

package/es/elements/ElementDamage/DuplicateDamage/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDataWithFilter } from "@olenbetong/appframe-react";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import { dsDamagesDuplicateCheck } from "../../data";
+import { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+export { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+export const DuplicateElementDamage = forwardRef(function DuplicateElementDamage({ element, open: controlledOpen, onOpenChange, disableCheck = false, loading = false, onRegisterAnyway, }, ref) {
+    let [record, setRecord] = useState([]);
+    let [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    let open = controlledOpen === undefined ? uncontrolledOpen : controlledOpen;
+    let whereClause = useMemo(() => {
+        if (!element) {
+            return "1=0";
+        }
+        return `Domain = '${element.Domain}' AND ElementID = '${element.ElementID}' AND ProjectID = '${element.ProjectID}'`;
+    }, [element]);
+    let duplicateRecord = useDataWithFilter(dsDamagesDuplicateCheck, whereClause, "whereClause");
+    async function runDuplicateCheck() {
+        // If we are editing a record, we don't need to check for duplicates
+        if (disableCheck) {
+            return null;
+        }
+        if (duplicateRecord.length > 0) {
+            setRecord(duplicateRecord);
+            setUncontrolledOpen(true);
+            return duplicateRecord;
+        }
+        return null;
+    }
+    function handleOpenChange(value) {
+        setUncontrolledOpen(value);
+        onOpenChange?.(value);
+    }
+    useImperativeHandle(ref, () => ({
+        onClose: () => setUncontrolledOpen(false),
+        checkDuplicate: () => runDuplicateCheck(),
+        record: record,
+    }));
+    return (_jsx(DuplicateElementDamageDialog, { open: open, onClose: () => handleOpenChange(false), record: record, onRegisterAnyway: onRegisterAnyway ?? (() => { }), loading: loading ?? false }));
+});

package/es/elements/ElementDamage/ElementNumberTextField.d.ts

@@ -0,0 +1,10 @@
+import { type SxProps, type Theme } from "@mui/material";
+type ElementNumberTextFieldProps = {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    sx?: SxProps<Theme>;
+};
+export declare function ElementNumberTextField({ value, defaultValue, onChange, disabled, sx }: ElementNumberTextFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/ElementNumberTextField.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useState } from "react";
+export function ElementNumberTextField({ value, defaultValue, onChange, disabled, sx }) {
+    let [elementNumber, setElementNumber] = useState(defaultValue ?? "");
+    let elementNumberValue = value === undefined ? elementNumber : value;
+    useEffect(() => {
+        if (value === undefined && defaultValue) {
+            setElementNumber(defaultValue);
+        }
+    }, [defaultValue, value]);
+    function handleChange(value) {
+        onChange?.(value);
+        setElementNumber(value);
+    }
+    return (_jsx(TextField, { name: "ElementNumber", id: "NewElementDamage_ElementNr", value: elementNumberValue, onChange: (event) => handleChange(event.currentTarget.value), label: getLocalizedString("Element number"), fullWidth: true, autoComplete: "off", disabled: disabled ?? false, sx: { ...sx } }));
+}

package/es/elements/ElementDamage/HiddenDamageFields.d.ts

@@ -0,0 +1,6 @@
+type HiddenDamageFieldsProps = {
+    primKey: string;
+    ID: number;
+};
+export declare function HiddenDamageFields({ primKey, ID }: HiddenDamageFieldsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/HiddenDamageFields.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function HiddenDamageFields({ primKey, ID }) {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: "PrimKey", value: primKey }), _jsx("input", { type: "hidden", name: "ID", value: ID })] }));
+}

package/es/elements/ElementDamage/RegisterFix.d.ts

@@ -0,0 +1,14 @@
+type RegisterFixType = {
+    ID: number;
+    RegisteredFixFullName: string | null;
+    RegisteredFix: Date | null;
+    RegisteredFixBy: string | null;
+};
+type RegisterFixProps = {
+    value?: RegisterFixType | null;
+    defaultValue?: RegisterFixType | null;
+    onFix?: (ID: number) => void;
+    edit?: boolean;
+};
+export declare function RegisterFix({ value, defaultValue, onFix, edit }: RegisterFixProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/RegisterFix.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import CheckIcon from "@mui/icons-material/Check";
+import { Button, Checkbox, FormControlLabel, Typography } from "@mui/material";
+import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+import { useEffect, useRef, useState } from "react";
+import { procApproveDamage } from "../data";
+const formatter = new Intl.DateTimeFormat(af.userSession.culture, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "UTC",
+});
+export function RegisterFix({ value, defaultValue, onFix, edit }) {
+    let [loading, setLoading] = useState(false);
+    let initializedRef = useRef(false);
+    let [fix, setFix] = useState(defaultValue ?? null);
+    let fixValue = value === undefined ? fix : value;
+    // biome-ignore lint: intentionally skipping "value" dependency as this should never run when "value" changes
+    useEffect(() => {
+        if (initializedRef.current) {
+            return;
+        }
+        if (value === undefined && defaultValue) {
+            setFix(defaultValue);
+            initializedRef.current = true;
+        }
+    }, [defaultValue]);
+    async function handleRegisterFix() {
+        try {
+            if (confirm(getLocalizedString("Are you sure you want to register a fix for this damage?"))) {
+                setLoading(true);
+                let record = (await procApproveDamage.execute({ ID: fixValue?.ID }));
+                setFix({ ...record.Table[0] });
+                setLoading(false);
+                onFix?.(fixValue?.ID ?? -1);
+            }
+        }
+        catch (error) {
+            alert(error.message);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [edit ? (_jsx(Button, { loading: loading, loadingPosition: "end", endIcon: _jsx(CheckIcon, {}), onClick: handleRegisterFix, disabled: !!fixValue?.RegisteredFix, variant: "contained", children: getLocalizedString("Register fix") })) : (_jsx(FormControlLabel, { control: _jsx(Checkbox, {}), label: getLocalizedString("Register fixed"), name: "RegisteredFix", id: "NewElementDamage_RegisteredFix" })), fixValue?.RegisteredFix && (_jsx(Typography, { mb: 1.5, color: "text.secondary", children: localize `Registered fix by ${fixValue.RegisteredFixFullName ?? fixValue.RegisteredFixBy} on the ${formatter.format(fixValue.RegisteredFix)}` }))] }));
+}

package/es/elements/ElementDamage/SubmitButtons.d.ts

@@ -0,0 +1,20 @@
+import { type SxProps, type Theme } from "@mui/material";
+type SubmitButtonsProps = {
+    /**
+     * Whether the form is in edit mode. If true, delete button is visible and submit button's text changes.
+     */
+    edit?: boolean;
+    /**
+     * Set loading state for submit button
+     */
+    loading?: boolean;
+    /**
+     * Custom styles for Box wrapper around buttons
+     */
+    sx?: SxProps<Theme>;
+    onDelete?: () => void;
+    onCancel?: () => void;
+    onSubmit?: () => void;
+};
+export declare function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }: SubmitButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/SubmitButtons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add from "@mui/icons-material/Add";
+import { Box, Button } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+export function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }) {
+    return (_jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 2, justifyContent: "flex-end", ...sx }, children: [edit && _jsx(Button, { onClick: onDelete, children: getLocalizedString("Delete") }), _jsx(Button, { onClick: onCancel, children: getLocalizedString("Cancel") }), _jsx(Button, { loading: loading, loadingPosition: "start", startIcon: _jsx(Add, {}), type: "submit", variant: "contained", onClick: onSubmit, children: edit ? getLocalizedString("Save changes") : getLocalizedString("Register damage") })] }));
+}

package/es/elements/ElementDamage/TransportElementSelect.d.ts

@@ -0,0 +1,7 @@
+import type { TransportElementsRecord } from "../data/dsTransportElements.js";
+type TransportElementSelectProps = {
+    elements: TransportElementsRecord[];
+    onSelect: (element: TransportElementsRecord) => void;
+};
+export declare function TransportElementSelect({ elements, onSelect }: TransportElementSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/TransportElementSelect.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import DropDownArrowIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Button, ListItemText, Menu, MenuItem } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+export function TransportElementSelect({ elements, onSelect }) {
+    let [anchorEl, setAnchorEl] = useState(null);
+    let open = !!anchorEl;
+    let [selected, setSelected] = useState(null);
+    function handleChange(element) {
+        setAnchorEl(null);
+        onSelect(element);
+        setSelected(element);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { id: "select_element", variant: "contained", endIcon: _jsx(DropDownArrowIcon, { style: { transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" } }), sx: { width: "165px" }, "aria-controls": open ? "basic-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: (event) => setAnchorEl(event.currentTarget), children: selected ? `${selected.ElementID} - ${selected.Name}` : getLocalizedString("Select element") }), _jsx(Menu, { id: "menu_element", anchorEl: anchorEl, open: open, onClose: () => setAnchorEl(null), children: elements.map((element) => (_jsx(MenuItem, { onClick: () => handleChange(element), children: _jsxs(ListItemText, { children: [element.ElementID, " - ", element.Name] }) }, element.PrimKey))) })] }));
+}

package/es/elements/ElementDamage/index.css

@@ -0,0 +1,3 @@
+.flow > * + * {
+	margin-top: var(--spacing, 1rem) !important;
+}

package/es/elements/ElementLookup.d.ts

@@ -0,0 +1,20 @@
+import { type RefObject } from "react";
+export type Element = {
+    Domain: string;
+    PrimKey: string;
+    ProjectID: string;
+    ProjectName: string;
+    ElementID: string | null;
+};
+export type ElementLookupHandle = {
+    openDialog: () => void;
+    closeDialog: () => void;
+};
+export type ElementLookupProps = {
+    value?: Element | null;
+    defaultValue?: Element | null;
+    ref?: RefObject<ElementLookupHandle | null>;
+    openLookupDialogIcon?: boolean;
+    onChange?: (value: Element | null) => void;
+};
+export declare function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookup.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from "@mui/icons-material/Search";
+import { IconButton, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useImperativeHandle, useState } from "react";
+import { ElementLookupDialog } from "./ElementLookupDialog";
+export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }) {
+    let [openElementLookupDialog, setOpenElementLookupDialog] = useState(false);
+    let [element, setElement] = useState(defaultValue ?? null);
+    let elementValue = value === undefined ? element : value;
+    useEffect(() => {
+        if (value === undefined && defaultValue) {
+            setElement(defaultValue);
+        }
+    }, [defaultValue, value]);
+    useImperativeHandle(ref, () => ({
+        openDialog: () => setOpenElementLookupDialog(true),
+        closeDialog: () => setOpenElementLookupDialog(false),
+    }));
+    async function handleAddElement(addElement) {
+        onChange?.(addElement.element);
+        setElement(addElement.element);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ElementLookupDialog, { open: openElementLookupDialog, mode: "single", onClose: () => setOpenElementLookupDialog(false), onAdd: handleAddElement }), _jsx("input", { type: "hidden", name: "ProjectID", value: elementValue?.ProjectID ?? "" }), _jsx("input", { type: "hidden", name: "ElementRef", value: elementValue?.PrimKey ?? "" }), _jsx(TextField, { id: "NewElementDamge_Project", value: elementValue ? `${elementValue.ProjectID}: ${elementValue.ProjectName}` : "", label: getLocalizedString("Project"), fullWidth: true, required: true, autoComplete: "off", slotProps: { htmlInput: { readOnly: true } } }), _jsx(TextField, { name: "ElementID", id: "NewElementDamage_ElementID", value: elementValue ? elementValue.ElementID : "", label: getLocalizedString("Element ID"), fullWidth: true, autoComplete: "off", slotProps: {
+                    htmlInput: { readOnly: true },
+                    input: {
+                        endAdornment: openLookupDialogIcon ? (_jsx(IconButton, { onClick: () => setOpenElementLookupDialog(true), children: _jsx(SearchIcon, {}) })) : undefined,
+                    },
+                } })] }));
+}

package/es/elements/ElementLookupDialog/BarcodeScanner/DeadIcon.d.ts

@@ -0,0 +1,2 @@
+import { type SvgIconProps } from "@mui/material";
+export declare function Dead(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookupDialog/BarcodeScanner/DeadIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export function Dead(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M6.76,8.82L7.82,7.76L8.88,8.82L9.94,7.76L11,8.82L9.94,9.88L11,10.94L9.94,12L8.88,10.94L7.82,12L6.76,10.94L7.82,9.88L6.76,8.82M6.89,17.5C7.69,15.46 9.67,14 12,14C14.33,14 16.31,15.46 17.11,17.5H6.89M17.24,10.94L16.18,12L15.12,10.94L14.06,12L13,10.94L14.06,9.88L13,8.82L14.06,7.76L15.12,8.82L16.18,7.76L17.24,8.82L16.18,9.88L17.24,10.94Z" }) }));
+}

package/es/elements/ElementLookupDialog/BarcodeScanner/Error.d.ts

@@ -0,0 +1,4 @@
+export declare function ErrorIcon({ icon, message }: {
+    icon?: string;
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookupDialog/BarcodeScanner/Error.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import Camera from "@mui/icons-material/Camera";
+import { Dead as DeadIcon } from "./DeadIcon";
+const BarcodeError = styled.div `
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+const ErrorBox = styled.div `
+	background: #111111;
+	border: 1px solid #3e3e3e;
+	border-radius: 3px;
+
+	max-width: 100%;
+	width: 335px;
+
+	color: white;
+	text-align: center;
+`;
+export function ErrorIcon({ icon, message }) {
+    let Icon = DeadIcon;
+    if (icon === "camera") {
+        Icon = Camera;
+    }
+    return (_jsx(BarcodeError, { children: _jsxs(ErrorBox, { children: [_jsx(Icon, { sx: { color: "#eee", fontSize: "3.5rem", my: 2 } }), _jsx("br", {}), _jsx("p", { children: message })] }) }));
+}

package/es/elements/ElementLookupDialog/BarcodeScanner/index.d.ts

@@ -0,0 +1,10 @@
+import type BarcodeReaderType from "dynamsoft-javascript-barcode";
+declare global {
+    interface Window {
+        BarcodeReader: typeof BarcodeReaderType;
+    }
+}
+export type BarcodeScannerProps = {
+    onRead: (barcode: string) => void;
+};
+export declare function BarcodeScanner({ onRead }: BarcodeScannerProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookupDialog/BarcodeScanner/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SwitchCameraOutlined from "@mui/icons-material/SwitchCameraOutlined";
+import { Box, IconButton } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useRef } from "react";
+import { ErrorIcon } from "./Error";
+import { useScanner } from "./useScanner";
+const frameSx = {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    height: "100%",
+    width: "100%",
+};
+export function BarcodeScanner({ onRead }) {
+    let readerRoot = useRef(null);
+    let canvas = useRef(null);
+    let { devices, error, setNextDevice } = useScanner(readerRoot, canvas, onRead);
+    return (_jsxs(Box, { sx: {
+            position: "relative",
+            bgcolor: "black",
+            height: "100%",
+        }, children: [_jsxs(Box, { height: "100%", ref: readerRoot, children: [_jsx(Box, { component: "video", className: "dbrScanner-video", playsInline: true, sx: frameSx }), _jsx(Box, { component: "canvas", sx: frameSx, width: "1280", height: "720", ref: canvas }), error && _jsx(ErrorIcon, { ...error })] }), _jsxs(Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    py: 1,
+                    px: 3,
+                    color: "white",
+                }, children: [devices.length <= 1 && _jsx("span", {}), devices.length > 1 && (_jsx(IconButton, { color: "inherit", "aria-label": getLocalizedString("Switch camera"), onClick: () => setNextDevice(), size: "large", children: _jsx(SwitchCameraOutlined, {}) }))] })] }));
+}

package/es/elements/ElementLookupDialog/BarcodeScanner/useScanner.d.ts

@@ -0,0 +1,16 @@
+import type BarcodeReaderType from "dynamsoft-javascript-barcode";
+import { type RefObject } from "react";
+declare global {
+    interface Window {
+        BarcodeReader: typeof BarcodeReaderType;
+    }
+}
+export declare function useScanner(rootRef: RefObject<HTMLElement | null>, canvasRef: RefObject<HTMLCanvasElement | null>, onRead: (barcode: string) => void): {
+    devices: BarcodeReaderType.VideoDeviceInfo[];
+    error: {
+        message: string;
+        icon: string;
+    } | null;
+    isLoading: boolean;
+    setNextDevice: () => void;
+};

package/es/elements/ElementLookupDialog/BarcodeScanner/useScanner.js

@@ -0,0 +1,135 @@
+import { getLocalizedString } from "@olenbetong/appframe-core";
+// import BarcodeReader from "dynamsoft-javascript-barcode";
+import { useEffect, useRef, useState } from "react";
+// (window as any).BarcodeReader = BarcodeReader;
+const { BarcodeReader } = window;
+export function useScanner(rootRef, canvasRef, onRead) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [rects, setRects] = useState([]);
+    const [devices, setDevices] = useState({
+        all: [],
+        current: { deviceId: "", label: "" },
+        width: 0,
+        height: 0,
+    });
+    const currentDevice = useRef(null);
+    const onReadRef = useRef(onRead);
+    const scanner = useRef(null);
+    useEffect(() => {
+        onReadRef.current = onRead;
+    }, [onRead]);
+    useEffect(() => {
+        if (!rootRef.current)
+            return;
+        let cancel = false;
+        const iPhone = /iPhone|iPad/.test(navigator.userAgent);
+        scanner.current = new BarcodeReader.Scanner({
+            duplicateForgetTime: 1000,
+            htmlElement: rootRef.current,
+            videoSettings: {
+                video: {
+                    width: { ideal: iPhone ? 1280 : 720 },
+                    height: { ideal: iPhone ? 1280 : 720 },
+                    facingMode: { ideal: "environment" },
+                },
+            },
+            runtimeSettings: {
+                mBarcodeFormatIds: BarcodeReader.EnumBarcodeFormat.DATAMATRIX,
+                mAntiDamageLevel: 3,
+                mDeblurLevel: 0,
+            },
+            onFrameRead: (results) => {
+                const newRects = [];
+                for (let result of results) {
+                    newRects.push(result.LocalizationResult);
+                }
+                if (newRects.length > 0) {
+                    setRects((rects) => [...rects, ...newRects]);
+                    setTimeout(() => {
+                        if (!cancel) {
+                            setRects((rects) => rects.slice(newRects.length));
+                        }
+                    }, 300);
+                }
+            },
+            onNewCodeRead: (txt) => {
+                if (txt) {
+                    onReadRef.current(txt);
+                }
+            },
+        });
+        scanner.current
+            .open()
+            .then((videoDeviceInfo) => {
+            if (cancel === false) {
+                const { all, current } = videoDeviceInfo;
+                currentDevice.current = 0;
+                if (current?.deviceId) {
+                    for (let i = 0; i < all.length; i++) {
+                        if (all[i].deviceId === current.deviceId) {
+                            currentDevice.current = i;
+                        }
+                    }
+                }
+                setDevices(videoDeviceInfo);
+                setIsLoading(false);
+            }
+        })
+            .catch((ex) => {
+            if (cancel === false) {
+                let error = ex.message || ex;
+                setIsLoading(false);
+                if (/Webassembly/.test(error)) {
+                    setError({
+                        icon: "unsupported",
+                        message: getLocalizedString("Your browser is not supported. A browser that supports WebAssembly is required."),
+                    });
+                }
+                else if (/Permission/i.test(error) ||
+                    /video/i.test(error) ||
+                    /device/i.test(error) ||
+                    /Media/i.test(error) ||
+                    /agent/.test(error) ||
+                    /found/.test(error))
+                    setError({
+                        icon: "camera",
+                        message: getLocalizedString("No camera available"),
+                    });
+                else {
+                    setError({ icon: "generic", message: error });
+                }
+            }
+        });
+        return () => {
+            cancel = true;
+            if (scanner.current && typeof scanner.current.close === "function") {
+                scanner.current.close();
+            }
+        };
+    }, [rootRef]);
+    useEffect(() => {
+        if (canvasRef.current) {
+            const ctx = canvasRef.current.getContext("2d");
+            ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+            ctx.fillStyle = "rgba(254,180,32,0.3)";
+            const { width, height } = canvasRef.current;
+            const xRatio = width / devices.width;
+            const yRatio = height / devices.height;
+            for (let rect of rects) {
+                const { X1, X2, X3, X4, Y1, Y2, Y3, Y4 } = rect;
+                ctx.beginPath();
+                ctx.moveTo(X1 * xRatio, Y1 * yRatio);
+                ctx.lineTo(X2 * xRatio, Y2 * yRatio);
+                ctx.lineTo(X3 * xRatio, Y3 * yRatio);
+                ctx.lineTo(X4 * xRatio, Y4 * yRatio);
+                ctx.fill();
+            }
+        }
+    }, [devices, canvasRef, rects]);
+    function setNextDevice() {
+        currentDevice.current = ((currentDevice.current ?? 0) + 1) % devices.all.length;
+        scanner.current?.play(devices.all[currentDevice.current].deviceId);
+    }
+    return { devices: devices.all, error, isLoading, setNextDevice };
+}

package/es/elements/ElementLookupDialog/HIDScanner/index.css

@@ -0,0 +1,17 @@
+@property --angle {
+	syntax: "<angle>";
+	inherits: false;
+	initial-value: 0deg;
+}
+
+@keyframes MovingBackground {
+	0% {
+		--angle: 0deg;
+	}
+	50% {
+		--angle: 180deg;
+	}
+	100% {
+		--angle: 360deg;
+	}
+}

package/es/elements/ElementLookupDialog/HIDScanner/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export declare function AddElementHIDScanner({ onScan }: {
+    onScan: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookupDialog/HIDScanner/index.js

@@ -0,0 +1,36 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "./index.css";
+import { Box, Button } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useRef, useState } from "react";
+import { useHIDScanner } from "./useHIDScanner";
+export function AddElementHIDScanner({ onScan }) {
+    let [enabled, setEnabled] = useState(false);
+    let root = useRef(null);
+    useEffect(() => {
+        if (!root.current)
+            return;
+        let rootElem = root.current;
+        function handleFocus() {
+            setEnabled(true);
+        }
+        function handleBlur() {
+            setEnabled(false);
+        }
+        rootElem.addEventListener("focus", handleFocus);
+        rootElem.addEventListener("blur", handleBlur);
+        rootElem.focus();
+        return () => {
+            rootElem.removeEventListener("focus", handleFocus);
+            rootElem.removeEventListener("blur", handleBlur);
+        };
+    }, []);
+    useHIDScanner(onScan, enabled);
+    return (_jsx(Box, { height: "100%", bgcolor: "#ddd", display: "flex", alignItems: "center", justifyContent: "center", tabIndex: 0, ref: root, sx: {
+            backgroundImage: enabled ? "linear-gradient(var(--angle), #777, #bbb, #777)" : "none",
+            animation: enabled ? "MovingBackground 8s linear infinite" : "none",
+        }, children: enabled ? (_jsxs("span", { children: [getLocalizedString("Listening for scanned elements"), "..."] })) : (_jsx(Button, { variant: "contained", onClick: () => {
+                if (root.current)
+                    root.current.focus();
+            }, children: getLocalizedString("Start listening") })) }));
+}

package/es/elements/ElementLookupDialog/HIDScanner/useHIDScanner.d.ts

@@ -0,0 +1 @@
+export declare function useHIDScanner(onRead: (value: string) => void, enabled?: boolean): void;