@feathery/react 2.10.2 → 2.10.4

package/dist/cjs/fthry_index.DN3JWoEi.js

@@ -0,0 +1,512 @@
+'use strict';
+
+var index = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var styles = require('./fthry_styles.BOrF2Mu4.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+
+var CAMERA_PREFERENCE_KEY = 'feathery-camera';
+function getCameraPreferences() {
+    if (!localStorage)
+        return null;
+    var storedData = localStorage.getItem(CAMERA_PREFERENCE_KEY);
+    if (!storedData)
+        return null;
+    try {
+        var preference = JSON.parse(storedData);
+        if (preference &&
+            preference.device_id &&
+            typeof preference.device_id === 'string') {
+            return preference;
+        }
+    }
+    catch (_a) {
+        return null;
+    }
+    return null;
+}
+function setCameraPreferences(preference) {
+    if (!preference)
+        return;
+    if (!localStorage)
+        return;
+    try {
+        localStorage.setItem(CAMERA_PREFERENCE_KEY, JSON.stringify(preference));
+    }
+    catch (_a) { }
+}
+
+// fetch device list, getting permissions if needed
+function fetchDeviceList() {
+    return index.__awaiter(this, void 0, void 0, function () {
+        var devices, noPermission, stream;
+        return index.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
+                case 1:
+                    devices = _a.sent();
+                    noPermission = devices
+                        .filter(function (device) { return device.kind === 'videoinput'; })
+                        .every(function (device) { return device.label === ''; });
+                    if (!noPermission) return [3 /*break*/, 4];
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+                            video: {
+                                facingMode: { ideal: 'environment' }
+                            },
+                            audio: false
+                        })];
+                case 2:
+                    stream = _a.sent();
+                    return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
+                case 3:
+                    // enumerate devices again - now the label field should be non-empty, as we have a stream active
+                    // (even if we didn't get persistent permission for camera)
+                    devices = _a.sent();
+                    // close the stream, as we don't need it anymore
+                    stream.getTracks().forEach(function (track) { return track.stop(); });
+                    _a.label = 4;
+                case 4: return [2 /*return*/, devices];
+            }
+        });
+    });
+}
+function selectCamera() {
+    return index.__awaiter(this, void 0, void 0, function () {
+        var allCameras, possibleCameras, cameraPreference;
+        return index.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getVideoCamerasAndCapabilities()];
+                case 1:
+                    allCameras = _a.sent();
+                    possibleCameras = index.__spreadArray([], index.__read(allCameras), false);
+                    if (possibleCameras.length === 0) {
+                        console.error('No cameras found!');
+                        return [2 /*return*/, null];
+                    }
+                    cameraPreference = getCameraPreferences();
+                    if ((cameraPreference === null || cameraPreference === void 0 ? void 0 : cameraPreference.device_id) &&
+                        allCameras.some(function (cam) { return cam.deviceId === (cameraPreference === null || cameraPreference === void 0 ? void 0 : cameraPreference.device_id); })) {
+                        return [2 /*return*/, {
+                                bestCameraId: cameraPreference === null || cameraPreference === void 0 ? void 0 : cameraPreference.device_id,
+                                allCameras: allCameras
+                            }];
+                    }
+                    if (possibleCameras.length === 1) {
+                        return [2 /*return*/, {
+                                bestCameraId: possibleCameras[0].deviceId,
+                                allCameras: allCameras
+                            }];
+                    }
+                    if (possibleCameras.some(backFacingCamera)) {
+                        possibleCameras = possibleCameras.filter(backFacingCamera);
+                    }
+                    if (possibleCameras.some(zoomCamera)) {
+                        possibleCameras = possibleCameras.filter(zoomCamera);
+                    }
+                    if (possibleCameras.some(torchCamera)) {
+                        possibleCameras = possibleCameras.filter(torchCamera);
+                    }
+                    possibleCameras.sort(sortByFocusDistance);
+                    return [2 /*return*/, {
+                            bestCameraId: possibleCameras[0].deviceId,
+                            allCameras: allCameras
+                        }];
+            }
+        });
+    });
+}
+var backFacingCamera = function (camera) { var _a; return (_a = camera.capabilities.facingMode) === null || _a === void 0 ? void 0 : _a.includes('enviroment'); };
+var torchCamera = function (camera) {
+    return camera.capabilities.torch;
+};
+var zoomCamera = function (camera) {
+    var _a, _b;
+    return ((_a = camera.capabilities.zoom) === null || _a === void 0 ? void 0 : _a.min) != null &&
+        ((_b = camera.capabilities.zoom) === null || _b === void 0 ? void 0 : _b.max) != null;
+};
+var sortByFocusDistance = function (a, b) {
+    var _a, _b;
+    var aFocus = (_a = a.capabilities.focusDistance) === null || _a === void 0 ? void 0 : _a.min;
+    var bFocus = (_b = b.capabilities.focusDistance) === null || _b === void 0 ? void 0 : _b.min;
+    if (typeof aFocus === 'number' && typeof bFocus !== 'number')
+        return -1;
+    if (typeof aFocus !== 'number' && typeof bFocus === 'number')
+        return 1;
+    if (typeof aFocus !== 'number' && typeof bFocus !== 'number')
+        return 0;
+    return aFocus - bFocus;
+};
+function getVideoCamerasAndCapabilities() {
+    return index.__awaiter(this, void 0, void 0, function () {
+        var devices, videoDevices, cameraList, videoDevices_1, videoDevices_1_1, device, stream, track, capabilities, e_1_1, error_1;
+        var e_1, _a;
+        return index.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 10, , 11]);
+                    return [4 /*yield*/, fetchDeviceList()];
+                case 1:
+                    devices = _b.sent();
+                    videoDevices = devices.filter(function (device) { return device.kind === 'videoinput'; });
+                    cameraList = [];
+                    _b.label = 2;
+                case 2:
+                    _b.trys.push([2, 7, 8, 9]);
+                    videoDevices_1 = index.__values(videoDevices), videoDevices_1_1 = videoDevices_1.next();
+                    _b.label = 3;
+                case 3:
+                    if (!!videoDevices_1_1.done) return [3 /*break*/, 6];
+                    device = videoDevices_1_1.value;
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+                            video: { deviceId: device.deviceId }
+                        })];
+                case 4:
+                    stream = _b.sent();
+                    track = stream.getVideoTracks()[0];
+                    capabilities = track.getCapabilities();
+                    // Add the camera and its capabilities to the list
+                    cameraList.push({
+                        label: device.label,
+                        deviceId: device.deviceId,
+                        capabilities: capabilities
+                    });
+                    // Stop the track to release the camera
+                    track.stop();
+                    _b.label = 5;
+                case 5:
+                    videoDevices_1_1 = videoDevices_1.next();
+                    return [3 /*break*/, 3];
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    e_1_1 = _b.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 9];
+                case 8:
+                    try {
+                        if (videoDevices_1_1 && !videoDevices_1_1.done && (_a = videoDevices_1.return)) _a.call(videoDevices_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/, cameraList];
+                case 10:
+                    error_1 = _b.sent();
+                    console.error('Error accessing video devices:', error_1);
+                    return [2 /*return*/, []];
+                case 11: return [2 /*return*/];
+            }
+        });
+    });
+}
+
+// TODO: figure out how to type scanner
+function getZoomSettings(scanner) {
+    var _a;
+    if (!scanner) {
+        return null;
+    }
+    // possible options
+    var cameraCapabilities = scanner.getRunningTrackCapabilities();
+    // current options
+    var cameraSettings = scanner.getRunningTrackSettings();
+    // todo: figure out type for cameraCapabilities
+    var supportsZoom = 'zoom' in cameraCapabilities &&
+        'min' in cameraCapabilities.zoom &&
+        'max' in cameraCapabilities.zoom;
+    if (!supportsZoom) {
+        return null;
+    }
+    var zoomCapabilities = cameraCapabilities.zoom;
+    var current = ('zoom' in cameraSettings ? cameraSettings.zoom : zoomCapabilities.min);
+    var zoomSettings = {
+        min: zoomCapabilities.min,
+        max: zoomCapabilities.max,
+        step: (_a = zoomCapabilities.step) !== null && _a !== void 0 ? _a : 0.1,
+        current: current
+    };
+    return zoomSettings;
+}
+
+/**
+ * Hook to listen for device rotation events.
+ *
+ * @param onRotate Callback to be called when the device is rotated.
+ * @param options Options for the hook, { enabled: boolean }.
+ */
+function useDeviceRotation(onRotate, _a) {
+    var _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+    var callbackRef = React.useRef(onRotate);
+    React.useEffect(function () {
+        callbackRef.current = onRotate;
+    }, [onRotate]);
+    React.useEffect(function () {
+        if (!enabled) {
+            return;
+        }
+        function handleOrientationChange() {
+            if (callbackRef.current) {
+                callbackRef.current();
+            }
+        }
+        index.featheryWindow().addEventListener('orientationchange', handleOrientationChange);
+        return function () {
+            index.featheryWindow().removeEventListener('orientationchange', handleOrientationChange);
+        };
+    }, [enabled]);
+}
+
+var SCAN_CONFIG = {
+    fps: 8,
+    rememberLastUsedCamera: true,
+    disableFlip: true,
+    aspectRatio: 4 / 3,
+    useBarCodeDetectorIfSupported: true
+};
+var PLACEHOLDER_IMAGE = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzEuNjQzIDM3MS42NDMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM3MS42NDMgMzcxLjY0MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTEwNS4wODQgMzguMjcxaDE2My43Njh2MjBIMTA1LjA4NHoiLz48cGF0aCBkPSJNMzExLjU5NiAxOTAuMTg5Yy03LjQ0MS05LjM0Ny0xOC40MDMtMTYuMjA2LTMyLjc0My0yMC41MjJWMzBjMC0xNi41NDItMTMuNDU4LTMwLTMwLTMwSDEyNS4wODRjLTE2LjU0MiAwLTMwIDEzLjQ1OC0zMCAzMHYxMjAuMTQzaC04LjI5NmMtMTYuNTQyIDAtMzAgMTMuNDU4LTMwIDMwdjEuMzMzYTI5LjgwNCAyOS44MDQgMCAwIDAgNC42MDMgMTUuOTM5Yy03LjM0IDUuNDc0LTEyLjEwMyAxNC4yMjEtMTIuMTAzIDI0LjA2MXYxLjMzM2MwIDkuODQgNC43NjMgMTguNTg3IDEyLjEwMyAyNC4wNjJhMjkuODEgMjkuODEgMCAwIDAtNC42MDMgMTUuOTM4djEuMzMzYzAgMTYuNTQyIDEzLjQ1OCAzMCAzMCAzMGg4LjMyNGMuNDI3IDExLjYzMSA3LjUwMyAyMS41ODcgMTcuNTM0IDI2LjE3Ny45MzEgMTAuNTAzIDQuMDg0IDMwLjE4NyAxNC43NjggNDUuNTM3YTkuOTg4IDkuOTg4IDAgMCAwIDguMjE2IDQuMjg4IDkuOTU4IDkuOTU4IDAgMCAwIDUuNzA0LTEuNzkzYzQuNTMzLTMuMTU1IDUuNjUtOS4zODggMi40OTUtMTMuOTIxLTYuNzk4LTkuNzY3LTkuNjAyLTIyLjYwOC0xMC43Ni0zMS40aDgyLjY4NWMuMjcyLjQxNC41NDUuODE4LjgxNSAxLjIxIDMuMTQyIDQuNTQxIDkuMzcyIDUuNjc5IDEzLjkxMyAyLjUzNCA0LjU0Mi0zLjE0MiA1LjY3Ny05LjM3MSAyLjUzNS0xMy45MTMtMTEuOTE5LTE3LjIyOS04Ljc4Ny0zNS44ODQgOS41ODEtNTcuMDEyIDMuMDY3LTIuNjUyIDEyLjMwNy0xMS43MzIgMTEuMjE3LTI0LjAzMy0uODI4LTkuMzQzLTcuMTA5LTE3LjE5NC0xOC42NjktMjMuMzM3YTkuODU3IDkuODU3IDAgMCAwLTEuMDYxLS40ODZjLS40NjYtLjE4Mi0xMS40MDMtNC41NzktOS43NDEtMTUuNzA2IDEuMDA3LTYuNzM3IDE0Ljc2OC04LjI3MyAyMy43NjYtNy42NjYgMjMuMTU2IDEuNTY5IDM5LjY5OCA3LjgwMyA0Ny44MzYgMTguMDI2IDUuNzUyIDcuMjI1IDcuNjA3IDE2LjYyMyA1LjY3MyAyOC43MzMtLjQxMyAyLjU4NS0uODI0IDUuMjQxLTEuMjQ1IDcuOTU5LTUuNzU2IDM3LjE5NC0xMi45MTkgODMuNDgzLTQ5Ljg3IDExNC42NjEtNC4yMjEgMy41NjEtNC43NTYgOS44Ny0xLjE5NCAxNC4wOTJhOS45OCA5Ljk4IDAgMCAwIDcuNjQ4IDMuNTUxIDkuOTU1IDkuOTU1IDAgMCAwIDYuNDQ0LTIuMzU4YzQyLjY3Mi0zNi4wMDUgNTAuODAyLTg4LjUzMyA1Ni43MzctMTI2Ljg4OC40MTUtMi42ODQuODIxLTUuMzA5IDEuMjI5LTcuODYzIDIuODM0LTE3LjcyMS0uNDU1LTMyLjY0MS05Ljc3Mi00NC4zNDV6bS0yMzIuMzA4IDQyLjYyYy01LjUxNCAwLTEwLTQuNDg2LTEwLTEwdi0xLjMzM2MwLTUuNTE0IDQuNDg2LTEwIDEwLTEwaDE1djIxLjMzM2gtMTV6bS0yLjUtNTIuNjY2YzAtNS41MTQgNC40ODYtMTAgMTAtMTBoNy41djIxLjMzM2gtNy41Yy01LjUxNCAwLTEwLTQuNDg2LTEwLTEwdi0xLjMzM3ptMTcuNSA5My45OTloLTcuNWMtNS41MTQgMC0xMC00LjQ4Ni0xMC0xMHYtMS4zMzNjMC01LjUxNCA0LjQ4Ni0xMCAxMC0xMGg3LjV2MjEuMzMzem0zMC43OTYgMjguODg3Yy01LjUxNCAwLTEwLTQuNDg2LTEwLTEwdi04LjI3MWg5MS40NTdjLS44NTEgNi42NjgtLjQzNyAxMi43ODcuNzMxIDE4LjI3MWgtODIuMTg4em03OS40ODItMTEzLjY5OGMtMy4xMjQgMjAuOTA2IDEyLjQyNyAzMy4xODQgMjEuNjI1IDM3LjA0IDUuNDQxIDIuOTY4IDcuNTUxIDUuNjQ3IDcuNzAxIDcuMTg4LjIxIDIuMTUtMi41NTMgNS42ODQtNC40NzcgNy4yNTEtLjQ4Mi4zNzgtLjkyOS44LTEuMzM1IDEuMjYxLTYuOTg3IDcuOTM2LTExLjk4MiAxNS41Mi0xNS40MzIgMjIuNjg4aC05Ny41NjRWMzBjMC01LjUxNCA0LjQ4Ni0xMCAxMC0xMGgxMjMuNzY5YzUuNTE0IDAgMTAgNC40ODYgMTAgMTB2MTM1LjU3OWMtMy4wMzItLjM4MS02LjE1LS42OTQtOS4zODktLjkxNC0yNS4xNTktMS42OTQtNDIuMzcgNy43NDgtNDQuODk4IDI0LjY2NnoiLz48cGF0aCBkPSJNMTc5LjEyOSA4My4xNjdoLTI0LjA2YTUgNSAwIDAgMC01IDV2MjQuMDYxYTUgNSAwIDAgMCA1IDVoMjQuMDZhNSA1IDAgMCAwIDUtNVY4OC4xNjdhNSA1IDAgMCAwLTUtNXpNMTcyLjYyOSAxNDIuODZoLTEyLjU2VjEzMC44YTUgNSAwIDEgMC0xMCAwdjE3LjA2MWE1IDUgMCAwIDAgNSA1aDE3LjU2YTUgNSAwIDEgMCAwLTEwLjAwMXpNMjE2LjU2OCA4My4xNjdoLTI0LjA2YTUgNSAwIDAgMC01IDV2MjQuMDYxYTUgNSAwIDAgMCA1IDVoMjQuMDZhNSA1IDAgMCAwIDUtNVY4OC4xNjdhNSA1IDAgMCAwLTUtNXptLTUgMjQuMDYxaC0xNC4wNlY5My4xNjdoMTQuMDZ2MTQuMDYxek0yMTEuNjY5IDEyNS45MzZIMTk3LjQxYTUgNSAwIDAgMC01IDV2MTQuMjU3YTUgNSAwIDAgMCA1IDVoMTQuMjU5YTUgNSAwIDAgMCA1LTV2LTE0LjI1N2E1IDUgMCAwIDAtNS01eiIvPjwvc3ZnPg==';
+// https://scanapp.org/html5-qrcode-docs/docs/apis/enums/Html5QrcodeScannerState
+var Html5QrcodeScannerState;
+(function (Html5QrcodeScannerState) {
+    // Invalid internal state, do not set to this state.
+    Html5QrcodeScannerState[Html5QrcodeScannerState["UNKNOWN"] = 0] = "UNKNOWN";
+    // Indicates the scanning is not running or user is using file based
+    // scanning.
+    Html5QrcodeScannerState[Html5QrcodeScannerState["NOT_STARTED"] = 1] = "NOT_STARTED";
+    // Camera scan is running.
+    Html5QrcodeScannerState[Html5QrcodeScannerState["SCANNING"] = 2] = "SCANNING";
+    // Camera scan is paused but camera is running.
+    Html5QrcodeScannerState[Html5QrcodeScannerState["PAUSED"] = 3] = "PAUSED";
+})(Html5QrcodeScannerState || (Html5QrcodeScannerState = {}));
+
+function createScanner(cameraElementId) {
+    return index.__awaiter(this, void 0, void 0, function () {
+        var window;
+        return index.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, index.qrPromise];
+                case 1:
+                    _a.sent();
+                    window = index.featheryWindow();
+                    return [2 /*return*/, new window.Html5Qrcode(cameraElementId)];
+            }
+        });
+    });
+}
+function QRScanner(_a) {
+    var _b;
+    var _this = this;
+    var _c, _d, _e, _f;
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, editMode = _a.editMode, _g = _a.elementProps, elementProps = _g === void 0 ? {} : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.onChange, onChange = _j === void 0 ? function () { } : _j, _k = _a.fieldVal, fieldVal = _k === void 0 ? '' : _k, children = _a.children;
+    var servar = (_c = element.servar) !== null && _c !== void 0 ? _c : {};
+    var cameraElementId = React.useId();
+    var scanner = React.useRef(undefined);
+    var fileInput = React.useRef(null);
+    var _l = index.__read(React.useState(''), 2), message = _l[0], setMessage = _l[1];
+    var _m = index.__read(React.useState(false), 2), zoomSettings = _m[0], setZoomSettings = _m[1];
+    var _o = index.__read(React.useState(1), 2), zoom = _o[0], setZoom = _o[1];
+    var _p = index.__read(React.useState([]), 2), cameraList = _p[0], setCameraList = _p[1];
+    var _q = index.__read(React.useState(''), 2), selectedCamera = _q[0], setSelectedCamera = _q[1];
+    var _r = index.__read(React.useState(Html5QrcodeScannerState.NOT_STARTED), 2), scanningState = _r[0], setScanningState = _r[1];
+    React.useEffect(function () {
+        if (disabled)
+            return;
+        index.loadQRScanner();
+    }, [disabled]);
+    React.useEffect(function () {
+        return function () {
+            handleStop(true);
+        };
+    }, []);
+    function applyZoom(value) {
+        var _a;
+        // scanner must exist
+        if (!scanner.current) {
+            return;
+        }
+        // scanner must be running
+        if (scanner.current.getState() !== Html5QrcodeScannerState.SCANNING) {
+            return;
+        }
+        // TODO: figure out how to type this properly
+        (_a = scanner.current) === null || _a === void 0 ? void 0 : _a.applyVideoConstraints({
+            zoom: value
+        });
+    }
+    function onScanSuccess(decodedText) {
+        var _a;
+        if ((_a = servar.metadata) === null || _a === void 0 ? void 0 : _a.close_on_scan) {
+            handleStop();
+        }
+        if (editMode || !decodedText)
+            return;
+        if (decodedText !== fieldVal)
+            onChange(decodedText);
+    }
+    var handleStart = React.useCallback(function (cameraId) { return index.__awaiter(_this, void 0, void 0, function () {
+        var _a, camera, result, bestCameraId, allCameras, zoomCapabilities;
+        var _b;
+        return index.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (disabled)
+                        return [2 /*return*/];
+                    if (!!scanner.current) return [3 /*break*/, 2];
+                    _a = scanner;
+                    return [4 /*yield*/, createScanner(cameraElementId)];
+                case 1:
+                    _a.current = _c.sent();
+                    _c.label = 2;
+                case 2:
+                    setScanningState(Html5QrcodeScannerState.SCANNING);
+                    setMessage('');
+                    if (!(((_b = scanner.current) === null || _b === void 0 ? void 0 : _b.getState()) === Html5QrcodeScannerState.NOT_STARTED)) return [3 /*break*/, 6];
+                    camera = cameraId !== null && cameraId !== void 0 ? cameraId : selectedCamera;
+                    if (!!camera) return [3 /*break*/, 4];
+                    return [4 /*yield*/, selectCamera()];
+                case 3:
+                    result = _c.sent();
+                    if (result) {
+                        bestCameraId = result.bestCameraId, allCameras = result.allCameras;
+                        setCameraList(allCameras);
+                        camera = bestCameraId;
+                        setSelectedCamera(camera);
+                    }
+                    if (!camera) {
+                        setMessage('No camera found');
+                        return [2 /*return*/];
+                    }
+                    _c.label = 4;
+                case 4: return [4 /*yield*/, scanner.current.start(camera, SCAN_CONFIG, onScanSuccess, undefined)];
+                case 5:
+                    _c.sent();
+                    zoomCapabilities = getZoomSettings(scanner.current);
+                    if (zoomCapabilities) {
+                        setZoomSettings(zoomCapabilities);
+                        setZoom(zoomCapabilities.current);
+                        applyZoom(zoomCapabilities.current);
+                    }
+                    else {
+                        setZoomSettings(false);
+                        setZoom(1);
+                    }
+                    _c.label = 6;
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); }, [selectedCamera]);
+    var handleStop = React.useCallback(function (clearScanner) {
+        if (clearScanner === void 0) { clearScanner = false; }
+        return index.__awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return index.__generator(this, function (_b) {
+                if (scanner.current) {
+                    if (((_a = scanner.current) === null || _a === void 0 ? void 0 : _a.getState()) === Html5QrcodeScannerState.SCANNING) {
+                        setCameraPreferences({
+                            device_id: scanner.current.getRunningTrackSettings().deviceId
+                        });
+                        scanner.current
+                            .stop()
+                            .catch(function (e) {
+                            console.error('Error stopping scanner:', e);
+                        })
+                            .finally(function () {
+                            if (clearScanner) {
+                                scanner.current = null;
+                            }
+                        });
+                    }
+                    else if (clearScanner) {
+                        scanner.current = null;
+                    }
+                }
+                setZoomSettings(false);
+                setZoom(1);
+                if (fileInput.current) {
+                    fileInput.current.value = '';
+                }
+                setMessage('');
+                setScanningState(Html5QrcodeScannerState.NOT_STARTED);
+                return [2 /*return*/];
+            });
+        });
+    }, []);
+    useDeviceRotation(handleStop, {
+        enabled: scanningState === Html5QrcodeScannerState.SCANNING
+    });
+    function changeCamera(newCameraId) {
+        return index.__awaiter(this, void 0, void 0, function () {
+            return index.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setSelectedCamera(newCameraId);
+                        return [4 /*yield*/, handleStop()];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, handleStart(newCameraId)];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    var handleZoom = React.useCallback(index.throttle(function (value) {
+        applyZoom(value);
+        setZoom(value);
+    }, 10), []);
+    return (index.jsx(index.Fragment, { children: index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({ maxWidth: '100%', width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative', pointerEvents: editMode || disabled ? 'none' : 'auto' }) }, elementProps, { children: [children, index.jsx("span", index.__assign({ style: { pointerEvents: 'none' } }, { children: fieldLabel })), index.jsxs("div", index.__assign({ css: index.__assign({ position: 'relative', overflow: 'hidden', border: '1px solid #e7e7e7' }, responsiveStyles.getTarget('sub-fc')) }, { children: [index.jsxs("div", index.__assign({ style: {
+                                width: '100%',
+                                minHeight: 150,
+                                textAlign: 'center',
+                                position: 'relative',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                                gap: 10,
+                                paddingBottom: 16
+                            } }, { children: [index.jsx("div", { id: cameraElementId, style: {
+                                        width: '100%',
+                                        aspectRatio: SCAN_CONFIG.aspectRatio.toString(),
+                                        display: scanningState !== Html5QrcodeScannerState.SCANNING
+                                            ? 'none'
+                                            : 'grid',
+                                        overflow: 'hidden',
+                                        placeContent: 'center'
+                                    } }), scanningState === Html5QrcodeScannerState.NOT_STARTED && (index.jsxs(index.Fragment, { children: [index.jsx("img", { width: '64', src: PLACEHOLDER_IMAGE, alt: 'Camera based scan', style: { opacity: '0.8', marginBottom: 10, marginTop: 16 } }), index.jsx("button", index.__assign({ disabled: disabled, type: 'button', onClick: function () { return handleStart(); } }, { children: fieldVal ? 'Scan Again' : 'Start Scanning' }))] })), scanningState === Html5QrcodeScannerState.SCANNING && (index.jsxs(index.Fragment, { children: [index.jsx(styles.SliderStyles, { customStyles: (_b = {},
+                                                _b['.rc-slider-handle'.repeat(2)] = {
+                                                    height: 30,
+                                                    width: 30,
+                                                    marginTop: -9,
+                                                    opacity: 1,
+                                                    userSelect: 'none'
+                                                },
+                                                _b['.rc-slider-track'.repeat(3)] = {
+                                                    height: 12
+                                                },
+                                                _b['.rc-slider-rail'.repeat(3)] = {
+                                                    height: 12
+                                                },
+                                                _b['.rc-slider'.repeat(3)] = {
+                                                    height: 12,
+                                                    padding: '10px 0'
+                                                },
+                                                _b) }), Boolean(zoomSettings) && (index.jsx("div", index.__assign({ style: {
+                                                display: 'flex',
+                                                alignSelf: 'stretch',
+                                                marginInline: 30,
+                                                marginBottom: 20
+                                            } }, { children: index.jsx(styles.Slider, { value: zoom, min: (_d = zoomSettings === null || zoomSettings === void 0 ? void 0 : zoomSettings.min) !== null && _d !== void 0 ? _d : 0, max: (_e = zoomSettings === null || zoomSettings === void 0 ? void 0 : zoomSettings.max) !== null && _e !== void 0 ? _e : 100, step: (_f = zoomSettings === null || zoomSettings === void 0 ? void 0 : zoomSettings.step) !== null && _f !== void 0 ? _f : 0.1, onChange: handleZoom, style: {
+                                                    flex: 1,
+                                                    paddingBlock: 10
+                                                } }) }))), index.jsxs("div", index.__assign({ style: {
+                                                alignSelf: 'stretch',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                marginInline: 15
+                                            } }, { children: [index.jsx("button", index.__assign({ type: 'button', onClick: function () { return handleStop(); } }, { children: "Stop Scanning" })), cameraList.length > 1 && (index.jsx("select", index.__assign({ value: selectedCamera, onChange: function (event) { return changeCamera(event.target.value); } }, { children: cameraList.map(function (camera) { return (index.jsx("option", index.__assign({ value: camera.deviceId }, { children: camera.label }), camera.deviceId)); }) })))] }))] })), message && index.jsx("div", index.__assign({ style: { paddingTop: 16 } }, { children: message }))] })), index.jsx(index.ErrorInput, { id: servar.key, "aria-label": element.properties.aria_label })] }))] })) }));
+}
+
+exports.default = QRScanner;