adp-web-components 0.0.70 → 0.0.72

package/dist/collection/components/vin-extractor/vin-extractor.js

@@ -0,0 +1,685 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h, Host } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import validateVin from "../../global/lib/validate-vin";
+const CAPTURE_INTERVAL = 2000;
+const ACTIVE_CAMERA_ID_KEY = 'activeCameraId';
+export class VinExtractor {
+    constructor() {
+        this.registerFileUploader = () => {
+            if (this.readSticker && !this.codeReader) {
+                setTimeout(() => {
+                    this.componentDidLoad();
+                }, 100);
+                return;
+            }
+            this.fileButton = document.querySelector('#' + this.uploaderButtonId);
+            this.fileInput = this.el.shadowRoot.querySelector('.vin-extractor-input');
+            this.fileButton.removeEventListener('click', this.onFileUploaderClick);
+            this.fileInput.removeEventListener('change', this.onFileUploaderChange);
+            this.fileButton.addEventListener('click', this.onFileUploaderClick);
+            this.fileInput.addEventListener('change', this.onFileUploaderChange);
+        };
+        this.onFileUploaderClick = () => {
+            this.fileInput.click();
+        };
+        this.onFileUploaderChange = () => {
+            var _a;
+            const file = (_a = this.fileInput.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (!file)
+                return;
+            const img = new Image();
+            const reader = new FileReader();
+            reader.onload = () => {
+                img.src = reader.result;
+            };
+            img.onload = async () => {
+                this.handleOnProcessing(true);
+                const ctx = this.videoCanvas.getContext('2d');
+                this.videoCanvas.width = img.width;
+                this.videoCanvas.height = img.height;
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
+                const imageDataUrl = this.videoCanvas.toDataURL('image/png');
+                await this.handleImage(imageDataUrl);
+                this.handleOnProcessing(false);
+            };
+            reader.readAsDataURL(file);
+        };
+        this.triggerCallback = (callback, ...args) => {
+            var _a;
+            if (callback) {
+                if (typeof callback === 'function')
+                    callback(...args);
+                else if (this.blazorRef && typeof callback === 'string' && !!callback)
+                    (_a = this.blazorRef) === null || _a === void 0 ? void 0 : _a.invokeMethodAsync(callback, ...args);
+            }
+        };
+        this.handleError = (error) => {
+            this.triggerCallback(this.onError, error);
+        };
+        this.handleExtract = (vin) => {
+            this.triggerCallback(this.onExtract, vin);
+        };
+        this.handleOnProcessing = (isProcessing) => {
+            this.triggerCallback(this.onProcessing, isProcessing);
+        };
+        this.captureFrame = async (manualCapture = false) => {
+            if (!this.isOpen)
+                return;
+            if (!this.videoPlayer || !this.videoCanvas)
+                return this.componentDidLoad();
+            const ctx = this.videoCanvas.getContext('2d');
+            if (!ctx)
+                return;
+            this.handleOnProcessing(true);
+            if (manualCapture) {
+                this.videoPlayer.pause();
+                this.manualCaptureLoading = true;
+            }
+            this.videoCanvas.width = this.videoPlayer.videoWidth;
+            this.videoCanvas.height = this.videoPlayer.videoHeight;
+            ctx.drawImage(this.videoPlayer, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
+            const imageDataUrl = this.videoCanvas.toDataURL('image/png');
+            this.handleImage(imageDataUrl);
+            if (!this.manualCapture) {
+                this.frameCaptureTimeoutRef = setTimeout(this.captureFrame, this.captureInterval);
+                this.handleOnProcessing(false);
+            }
+            if (manualCapture) {
+                setTimeout(() => {
+                    this.videoPlayer.play();
+                    this.manualCaptureLoading = false;
+                    this.handleOnProcessing(false);
+                }, 1000);
+            }
+        };
+        this.handleImage = async (imageDataUrl) => {
+            if (this.readSticker)
+                await this.stickerHandler(imageDataUrl);
+            if (this.useOcr && this.ocrEndpoint)
+                await this.ocrHandler(imageDataUrl);
+        };
+        this.ocrHandler = async (imageDataUrl) => {
+            try {
+                const response = await fetch(this.ocrEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    signal: this.abortController.signal,
+                    body: JSON.stringify({ image: imageDataUrl.split(',')[1] }),
+                });
+                if (!response.ok)
+                    throw new Error('Failed to fetch OCR result');
+                if (this.verbose)
+                    console.log(response);
+                const data = await response.text();
+                if (this.skipValidation || (!!data.trim() && validateVin(data)))
+                    this.handleExtract(data);
+            }
+            catch (error) {
+                this.handleError(error);
+            }
+        };
+        this.stickerHandler = async (imageDataUrl) => {
+            try {
+                if (this.verbose)
+                    console.log('try detecting sticker');
+                const result = await this.codeReader.decodeFromImage(undefined, imageDataUrl);
+                const text = result.getText();
+                if (this.verbose)
+                    console.log(text);
+                if (!!text.trim()) {
+                    if (this.skipValidation)
+                        this.handleExtract(text.trim());
+                    else {
+                        const vin = text.replace(/[qo]/g, '0').replace(/i/g, '1').replace(/ /g, '');
+                        if (vin.length === 17 && validateVin(vin))
+                            this.handleExtract(vin);
+                    }
+                }
+            }
+            catch (error) {
+                this.handleError(error);
+            }
+        };
+        this.openScanner = async () => {
+            var _a;
+            try {
+                (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+                this.abortController = new AbortController();
+                const permissionStatus = await navigator.permissions.query({
+                    // @ts-ignore
+                    name: 'camera',
+                });
+                if (permissionStatus.state === 'prompt') {
+                    try {
+                        await navigator.mediaDevices.getUserMedia({
+                            video: true,
+                        });
+                    }
+                    catch (error) {
+                        throw new Error('no camera access');
+                    }
+                }
+                if (permissionStatus.state === 'denied') {
+                    throw new Error('no camera access');
+                }
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const videoInputs = devices.filter(device => {
+                    if (device.kind !== 'videoinput')
+                        return false;
+                    // TODO: this code only works for IOS however android has no standards
+                    // const label = device.label.toLowerCase();
+                    // const hasDirection = label.includes('front') || label.includes('back');
+                    // const isValid = label.includes('front camera') || label.includes('back camera');
+                    // return hasDirection ? isValid : true;
+                    return true;
+                });
+                if (videoInputs.length === 0)
+                    throw new Error('No Camera Found');
+                this.videoInputs = videoInputs;
+                if (!videoInputs.some(input => input.deviceId === this.activeCameraId)) {
+                    const selectedCamera = videoInputs.find(({ label }) => label.toLowerCase().includes('back') || label.toLowerCase().includes('environment')) || videoInputs[0];
+                    this.activeCameraId = selectedCamera.deviceId;
+                    localStorage.setItem(ACTIVE_CAMERA_ID_KEY, this.activeCameraId);
+                }
+                await this.startCamera();
+                if (!this.manualCapture)
+                    this.frameCaptureTimeoutRef = setTimeout(this.captureFrame, this.captureInterval + 300);
+                if (document)
+                    document.body.style.overflow = 'hidden';
+                this.isCameraReady = true;
+                this.containerAnimation = 'show-container';
+            }
+            catch (error) {
+                this.handleError(error);
+            }
+        };
+        this.startCamera = async () => {
+            try {
+                const constraints = {
+                    video: {
+                        deviceId: this.activeCameraId,
+                    },
+                };
+                this.streamRef = await navigator.mediaDevices.getUserMedia(constraints);
+                if (this.videoPlayer) {
+                    this.videoPlayer.srcObject = this.streamRef;
+                    this.videoPlayer.play();
+                }
+                this.manualCaptureLoading = false;
+            }
+            catch (error) {
+                if (this.verbose)
+                    console.error(error);
+                throw new Error('Error accessing camera: ');
+            }
+        };
+        this.closeScanner = () => {
+            this.isCameraReady = false;
+            this.abortController.abort();
+            clearTimeout(this.frameCaptureTimeoutRef);
+            if (this.codeReader)
+                this.codeReader.reset();
+            if (document)
+                document.body.style.overflow = 'auto';
+            this.containerAnimation = 'hide-container';
+        };
+        this.stopCamera = () => {
+            if (this.streamRef) {
+                this.streamRef.getTracks().forEach(track => track.stop());
+                this.streamRef = null;
+            }
+        };
+        this.switchCamera = () => {
+            if (this.videoInputs.length > 1) {
+                const currentIndex = this.videoInputs.findIndex(device => device.deviceId === this.activeCameraId);
+                const newCameraIndex = (currentIndex + 1) % this.videoInputs.length;
+                this.activeCameraId = this.videoInputs[newCameraIndex].deviceId;
+                localStorage.setItem(ACTIVE_CAMERA_ID_KEY, this.activeCameraId);
+                this.stopCamera();
+                this.startCamera();
+                this.switchRotateDegree += 90;
+            }
+        };
+        this.title = '';
+        this.isOpen = false;
+        this.captureInterval = CAPTURE_INTERVAL;
+        this.verbose = false;
+        this.useOcr = false;
+        this.readSticker = false;
+        this.uploaderButtonId = undefined;
+        this.manualCapture = false;
+        this.skipValidation = false;
+        this.ocrEndpoint = undefined;
+        this.onExtract = undefined;
+        this.onError = undefined;
+        this.onProcessing = undefined;
+        this.onOpenChange = undefined;
+        this.streamRef = undefined;
+        this.isAnimating = false;
+        this.isCameraReady = false;
+        this.switchRotateDegree = 0;
+        this.containerAnimation = '';
+        this.blazorRef = undefined;
+        this.videoInputs = [];
+        this.manualCaptureLoading = false;
+        this.activeCameraId = localStorage.getItem(ACTIVE_CAMERA_ID_KEY) || '';
+    }
+    async componentDidLoad() {
+        this.videoPlayer = this.el.shadowRoot.querySelector('.video-player');
+        this.videoCanvas = this.el.shadowRoot.querySelector('.video-canvas');
+        this.abortController = new AbortController();
+        if (!this.readSticker && this.uploaderButtonId)
+            this.registerFileUploader();
+        if (this.readSticker) {
+            const ZXingSrc = 'https://unpkg.com/@zxing/library@0.21.3/umd/index.min.js';
+            const alreadyLoaded = Array.from(document.scripts).some(script => script.src === ZXingSrc);
+            if (alreadyLoaded && this.uploaderButtonId)
+                this.registerFileUploader();
+            if (!alreadyLoaded) {
+                const script = document.createElement('script');
+                script.src = ZXingSrc;
+                script.defer = true;
+                document.head.appendChild(script);
+                script.onload = () => {
+                    // @ts-ignore
+                    if (ZXing)
+                        this.codeReader = new ZXing.BrowserMultiFormatReader();
+                };
+            }
+            else if (!this.codeReader) {
+                try {
+                    // @ts-ignore
+                    if (ZXing)
+                        this.codeReader = new ZXing.BrowserMultiFormatReader();
+                }
+                catch (error) {
+                    setTimeout(() => {
+                        this.componentDidLoad();
+                    }, 100);
+                }
+            }
+        }
+    }
+    setBlazorRef(newBlazorRef) {
+        this.blazorRef = newBlazorRef;
+    }
+    open() {
+        this.isOpen = true;
+    }
+    async close() {
+        this.isOpen = false;
+    }
+    isOpenHandler(newValue) {
+        if (newValue)
+            this.openScanner();
+        else
+            this.closeScanner();
+        this.triggerCallback(this.onOpenChange, newValue);
+    }
+    QRChanged(newValue) {
+        if (newValue)
+            this.componentDidLoad();
+    }
+    animationHandler(newValue) {
+        if (!newValue && !this.isOpen)
+            this.stopCamera();
+    }
+    render() {
+        const ariaExpanded = this.isOpen && this.isCameraReady && (this.useOcr || this.readSticker);
+        return (h(Host, { key: 'd9312226320c91737681368c4dd2792fdfd9f3e5' }, h("slot", { key: 'f4f045e3bb7eb1531424f2a7b9f525868ac21097' }), h("input", { key: 'cd50cba3a41ea514f1f1aedb78435b85bb40f509', class: "vin-extractor-input", type: "file", accept: "image/*", capture: "environment", hidden: true }), h("canvas", { key: 'e50ec0bd15eb6f07639974374ccd9593e7df8e16', class: "video-canvas hidden" }), !this.uploaderButtonId && (h("div", { key: '5bd81346260512c17f2f54e0c700e55d284539f4', onClick: () => (this.isOpen = false), "aria-expanded": ariaExpanded.toString(), class: "vin-extractor-background md:aria-expanded:bg-black/40 md:transition-all md:duration-300 fixed flex items-center justify-center w-[100dvw] h-[100dvh] top-0 left-0 z-[9999]" }, h("div", { key: '37f22e346e17420f3e6fc5a62b2e2b0f67adf81f', onClick: e => e.stopPropagation(), "aria-expanded": ariaExpanded.toString(), onAnimationEnd: () => (this.isAnimating = false), onAnimationStart: () => (this.isAnimating = true), class: cn('vin-extractor-container md:w-[600px] md:rounded-lg md:overflow-hidden opacity-0 md:h-auto aria-expanded:pointer-events-auto w-full h-full relative transition-all duration-500', this.containerAnimation) }, h("div", { key: 'ec9762ce16f7a6de0f3dd56b1ac52b4fc0e0d670', class: "vin-extractor-heading items-center md:py-[8px] w-full md:!opacity-100 md:!translate-x-0 p-[16px] md:bg-white bg-black/30 shadow-md z-10 md:relative absolute top-0 left-0 flex justify-between" }, this.videoInputs.length > 1 ? (h("button", { type: "button", onClick: this.switchCamera, class: "size-[32px] md:border-none md:bg-white md:hover:bg-slate-100 bg-slate-100 rounded-lg p-1 hover:text-slate-700 border transition-colors duration-300 hover:bg-slate-300 border-slate-600 text-slate-600 hover:border-slate-700" }, h("svg", { width: "24", height: "24", fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-full transition-all duration-300", style: { rotate: `${this.switchRotateDegree}deg` } }, h("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }), h("path", { d: "M21 3v5h-5" }), h("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }), h("path", { d: "M8 16H3v5" })))) : (h("div", { class: "size-8" })), h("h1", { key: 'b94566ef63fe91c9dde534ab23d4e1aee6eb4202', class: "text-center md:text-3xl md:text-black text-slate-100 text-xl" }, this.title), h("button", { key: 'cc573cc740b0b57fa375c12438034c08035ee952', type: "button", onClick: () => (this.isOpen = false), class: "size-[32px] md:border-none md:bg-white md:hover:bg-slate-100 bg-slate-100 rounded-lg p-1 hover:text-slate-700 border transition-colors duration-300 hover:bg-slate-300 border-slate-600 text-slate-600 hover:border-slate-700" }, h("svg", { key: '76a221a32de010ea3149450cdfdac11fec45009d', fill: "none", "stroke-width": "2", class: "size-full", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a07797044b13941c174ea9ae5c12b963841f720c', d: "M18 6 6 18" }), h("path", { key: 'c5dd1a2ebabb47f07edfa64a5fe4499656192eae', d: "m6 6 12 12" })))), this.manualCapture && (h("button", { key: 'ea2b100590631861b79b75dc63a7d97c069e35ea', type: "button", disabled: this.manualCaptureLoading, onClick: this.captureFrame.bind(this, true), class: "absolute disabled:bg-white/75 outline-none cursor-pointer left-1/2 -translate-x-1/2 flex justify-center items-center h-[60px] py-[10px] w-[100px] rounded-full shadow-lg border border-slate-500 text-slate-500 z-10 bg-white bottom-4" }, this.manualCaptureLoading ? (h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-full animate-spin", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }))) : (h("svg", { fill: "none", "stroke-width": "2", class: "size-full", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }), h("circle", { cx: "12", cy: "13", r: "3" }))))), h("video", { key: 'c433241d3c01cfe199bc5b0bc50901b5cb15eb86', id: "video", autoPlay: true, playsInline: true, class: "video-player md:aspect-auto bg-black min-w-full min-h-full object-cover object-center" }))))));
+    }
+    static get is() { return "vin-extractor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vin-extractor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vin-extractor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "captureInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "capture-interval",
+                "reflect": false,
+                "defaultValue": "CAPTURE_INTERVAL"
+            },
+            "verbose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "verbose",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "useOcr": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "use-ocr",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readSticker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "read-sticker",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "uploaderButtonId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uploader-button-id",
+                "reflect": false
+            },
+            "manualCapture": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "manual-capture",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "skipValidation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "skip-validation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ocrEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "ocr-endpoint",
+                "reflect": false
+            },
+            "onExtract": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "((vin: string) => void) | string",
+                    "resolved": "((vin: string) => void) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-extract",
+                "reflect": false
+            },
+            "onError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "((newError: Error) => void) | string",
+                    "resolved": "((newError: Error) => void) | string",
+                    "references": {
+                        "Error": {
+                            "location": "global",
+                            "id": "global::Error"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-error",
+                "reflect": false
+            },
+            "onProcessing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "((vin: string) => void) | string",
+                    "resolved": "((vin: string) => void) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-processing",
+                "reflect": false
+            },
+            "onOpenChange": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "((newError: boolean) => void) | string",
+                    "resolved": "((newError: boolean) => void) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-open-change",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "streamRef": {},
+            "isAnimating": {},
+            "isCameraReady": {},
+            "switchRotateDegree": {},
+            "containerAnimation": {},
+            "blazorRef": {},
+            "videoInputs": {},
+            "manualCaptureLoading": {},
+            "activeCameraId": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setBlazorRef": {
+                "complexType": {
+                    "signature": "(newBlazorRef: DotNetObjectReference) => Promise<void>",
+                    "parameters": [{
+                            "name": "newBlazorRef",
+                            "type": "{ invokeMethodAsync: (methodName: string, ...args: any[]) => Promise<any>; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "DotNetObjectReference": {
+                            "location": "import",
+                            "path": "~types/components",
+                            "id": "src/global/types/components.ts::DotNetObjectReference"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {},
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "isOpenHandler"
+            }, {
+                "propName": "readSticker",
+                "methodName": "QRChanged"
+            }, {
+                "propName": "isAnimating",
+                "methodName": "animationHandler"
+            }];
+    }
+}