@twintag/twintag-core 0.2.261 → 0.2.262

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-scanner.cjs",[[1,"twintag-scanner",{"mode":[1],"open":[4],"possibleFormats":[16],"tryHarder":[1540,"try-harder"],"customCheckIcon":[1,"custom-check-icon"],"targetVideoWidth":[2,"target-video-width"],"targetVideoHeight":[2,"target-video-height"],"targetFrameRate":[2,"target-frame-rate"],"crop":[1538],"ocrScanner":[4,"ocr-scanner"],"stageWidth":[32],"stageHeight":[32],"available":[32],"frameCapture":[32],"devices":[32],"ocrIsScanning":[32]},[[2,"ocr","ocrHandler"],[2,"openCamera","openCameraHandler"],[2,"closeCamera","closeCameraHandler"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"title":[1],"subtitle":[1],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-scanner.cjs",[[1,"twintag-scanner",{"mode":[1],"open":[4],"possibleFormats":[16],"tryHarder":[1540,"try-harder"],"customCheckIcon":[1,"custom-check-icon"],"targetVideoWidth":[2,"target-video-width"],"targetVideoHeight":[2,"target-video-height"],"targetFrameRate":[2,"target-frame-rate"],"crop":[1538],"ocrScanner":[4,"ocr-scanner"],"stageWidth":[32],"stageHeight":[32],"available":[32],"frameCapture":[32],"devices":[32],"ocrIsScanning":[32]},[[2,"ocr","ocrHandler"],[2,"openCamera","openCameraHandler"],[2,"closeCamera","closeCameraHandler"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
   });
 };
 

package/dist/cjs/stencil-web-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-scanner.cjs",[[1,"twintag-scanner",{"mode":[1],"open":[4],"possibleFormats":[16],"tryHarder":[1540,"try-harder"],"customCheckIcon":[1,"custom-check-icon"],"targetVideoWidth":[2,"target-video-width"],"targetVideoHeight":[2,"target-video-height"],"targetFrameRate":[2,"target-frame-rate"],"crop":[1538],"ocrScanner":[4,"ocr-scanner"],"stageWidth":[32],"stageHeight":[32],"available":[32],"frameCapture":[32],"devices":[32],"ocrIsScanning":[32]},[[2,"ocr","ocrHandler"],[2,"openCamera","openCameraHandler"],[2,"closeCamera","closeCameraHandler"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"title":[1],"subtitle":[1],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-scanner.cjs",[[1,"twintag-scanner",{"mode":[1],"open":[4],"possibleFormats":[16],"tryHarder":[1540,"try-harder"],"customCheckIcon":[1,"custom-check-icon"],"targetVideoWidth":[2,"target-video-width"],"targetVideoHeight":[2,"target-video-height"],"targetFrameRate":[2,"target-frame-rate"],"crop":[1538],"ocrScanner":[4,"ocr-scanner"],"stageWidth":[32],"stageHeight":[32],"available":[32],"frameCapture":[32],"devices":[32],"ocrIsScanning":[32]},[[2,"ocr","ocrHandler"],[2,"openCamera","openCameraHandler"],[2,"closeCamera","closeCameraHandler"]]]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
 });

package/dist/cjs/twintag-offline-support.cjs.entry.js

@@ -206,7 +206,7 @@ class IndexedDbService {
 /**
  * The SDK version.
  */
-const VERSION = '0.2.261';
+const VERSION = '0.2.262';
 
 class TwintagErrorValue {
 }

package/dist/cjs/twintag-scanner.cjs.entry.js

@@ -38156,7 +38156,7 @@ const TwintagScanner = class {
   }
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.onSymbol = index.createEvent(this, "onSymbol", 7);
+    this.symbol = index.createEvent(this, "symbol", 7);
     this.errorText = '';
     this.NOT_ALLOWED_ERROR = 'NotAllowedError';
     this.stageWidth = 0;
@@ -38178,14 +38178,7 @@ const TwintagScanner = class {
     this.errorText = '';
     this.noPermission = false;
   }
-  componentWillLoad() {
-    this.codeReader = new ZXingReader({
-      codeReader: null,
-      formats: this.possibleFormats,
-      tryHarder: this.tryHarder,
-    });
-    if (this.open)
-      this.openCameraHandler();
+  connectedCallback() {
     if (this.ocrScanner) {
       (async () => {
         this.worker = src.createWorker();
@@ -38194,6 +38187,8 @@ const TwintagScanner = class {
         await this.worker.initialize('eng');
       })();
     }
+    if (this.open)
+      this.openCameraHandler();
   }
   componentDidLoad() {
     this.osCanvas = document.createElement('canvas');
@@ -38269,8 +38264,8 @@ const TwintagScanner = class {
         this.osCanvas.height = sHeight;
         this.resize();
       }
-      if (!this.scanning) {
-        this.scanning = true;
+      if (!this.isScanning) {
+        this.isScanning = true;
         this.osContext.drawImage(this.video, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
         this.scan();
       }
@@ -38306,7 +38301,12 @@ const TwintagScanner = class {
     let symbols = [];
     try {
       if (!this.ocrScanner) {
-        symbols = this.codeReader.readFromCanvas(this.osCanvas);
+        const codeReader = new ZXingReader({
+          codeReader: null,
+          formats: this.possibleFormats,
+          tryHarder: this.tryHarder,
+        });
+        symbols = codeReader.readFromCanvas(this.osCanvas);
       }
       // To control when to scan using OCR
       if (this.ocrIsScanning) {
@@ -38334,8 +38334,8 @@ const TwintagScanner = class {
     }
     let emitted = false;
     for (const symbol of symbols) {
-      if (symbol.Text !== ((_a = this.lastScan) === null || _a === void 0 ? void 0 : _a.Text)) {
-        this.lastScan = symbol;
+      if (symbol.Text !== ((_a = this.lastScannedSymbol) === null || _a === void 0 ? void 0 : _a.Text)) {
+        this.lastScannedSymbol = symbol;
         this.emitResult(symbol);
         emitted = true;
       }
@@ -38344,7 +38344,7 @@ const TwintagScanner = class {
       this.showProcessedCheck();
       this.stopStream();
     }
-    this.scanning = false;
+    this.isScanning = false;
   }
   showProcessedCheck() {
     const tl = gsapWithCSS.timeline();
@@ -38365,7 +38365,7 @@ const TwintagScanner = class {
       },
     });
   }
-  async stopStream() {
+  stopStream() {
     window.localStream.getTracks().forEach((track) => {
       gsapWithCSS.to(this.videoContainerRef, {
         duration: 0.2,
@@ -38377,14 +38377,17 @@ const TwintagScanner = class {
       });
       return track.stop();
     });
-    if (this.ocrScanner)
-      await this.worker.terminate();
-    this.lastScan = null;
+    if (this.ocrScanner) {
+      (async () => {
+        await this.worker.terminate();
+      })();
+    }
+    this.lastScannedSymbol = null;
   }
   emitResult(symbol) {
     /* Taking a screenshot of the canvas and then emitting the result. */
     this.frameCapture = this.osCanvas.toDataURL();
-    this.onSymbol.emit({
+    this.symbol.emit({
       Text: symbol.Text,
       Format: symbol.Format,
       Frame: this.frameCapture,
@@ -38404,6 +38407,9 @@ const TwintagScanner = class {
       this.app.resize(this.stageHeight * spRatio, this.stageHeight);
     }
   }
+  disconnectedCallback() {
+    this.closeCameraHandler();
+  }
   render() {
     return (index.h(index.Host, null, this.noPermission ? index.h("div", null, this.errorText) : null, index.h("div", { class: "icon-container" }, this.customCheckIcon ? (index.h("img", { class: "check-icon", src: this.customCheckIcon, ref: (el) => (this.successIcon = el) })) : (index.h("svg", { class: "check-icon", ref: (el) => (this.successIcon = el), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 150 150", width: "150px", height: "150px" }, index.h("g", null, index.h("path", { style: {
         stroke: 'none',

package/dist/cjs/twintag-share.cjs.entry.js

@@ -4,23 +4,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2c25b2e9.js');
 
-const twintagShareCss = ":host{display:block;--background:#3c8cfa;--color:#fff;--font-family:Helvetica;--box-shadow:0 0 2px -2px rgba(29, 39, 231, 0.1),\n    0 0 3px 0 rgba(29, 39, 231, 0.1), 0 0 5px 0 rgba(29, 39, 231, 0.1),\n    0 2px 2px -4px rgba(29, 39, 231, 0.1), 0 4px 8px 0 rgba(29, 39, 231, 0.1),\n    0 2px 15px 0 rgba(29, 39, 231, 0.1)}.share-header{background:var(--background);color:var(--color);height:2rem;display:flex;justify-content:space-between;padding:0px 10px}.share-header .share-header-button{border:0px;height:100%;background:var(--background);color:var(--color);font-family:var(--font-family);cursor:pointer}.share-header .share-header-button:hover{opacity:50%}.share-header .share-header-title{margin:auto;font-size:16px}.share-container{position:fixed;left:0;right:0;top:0;bottom:0;opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:10}.share-modal-overlay{background:rgba(0, 0, 0, 0.6);width:100%;height:100%;position:absolute}.visible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.modal{font-family:var(--font-family);font-size:14px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:2px;width:500px}.modal .share-content{padding:20px;height:360px}.modal .share-content .share-content-anc{font-size:13px;text-decoration:none;text-overflow:ellipsis;overflow:hidden;display:block}.modal .share-content .share-content-subtitle{padding-bottom:8px}.modal .share-content .share-content-break{margin-top:20px}.modal .share-content .share-link-content{padding:20px 0px 0px;display:flex;flex-direction:column}.modal .share-content .share-link-content .copy-clip-button{text-transform:uppercase;background-color:var(--background);color:var(--color);padding:10px 20px;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;transition:0.3s;border-radius:4px;border:none;outline:none;white-space:nowrap;vertical-align:middle;margin:5px;box-shadow:var(--box-shadow);width:100%;height:30px;font-family:var(--font-family)}.modal .share-content .share-link-content .copy-clip-button:hover{opacity:0.7}.modal .share-content .share-link-content .qr-code{margin:auto}.ripple{position:relative;overflow:hidden;transform:translate3d(0, 0, 0)}.ripple:after{content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle, #fff 10%, transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10, 10);opacity:0;transition:transform 0.5s, opacity 1s}.ripple:active:after{transform:scale(0, 0);opacity:0.3;transition:0s}.tab{overflow:hidden;border:1px solid #ccc;background-color:#e5e3e3;display:flex;justify-content:center;border-radius:8px;height:3.5rem}.tab-header:hover{opacity:0.5}.tab-header.active{border-radius:8px;border:1px solid #fff;background:#fff;box-shadow:0 0 5px rgba(0, 0, 0, 0.16);opacity:1 !important}.tabcontent{display:none;padding:6px 12px;border:none;margin-top:35px}.tab-header{display:flex;flex-direction:column;width:50%;padding:4px;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:none}.tab-header .tab-icon{width:32px}.tablinks{cursor:pointer}.tablinks svg,.tablinks label{margin:auto}.tablinks label{font-size:12px;font-family:var(--font-family)}@media only screen and (max-width: 768px){.modal{width:100%;height:100%}}@keyframes ripples{0%{width:0px;height:0px;opacity:0.5}100%{width:500px;height:500px;opacity:0}}#snackbar{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#333;color:#fff;text-align:center;border-radius:5px;padding:16px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:14px;font-family:var(--font-family)}#snackbar.show{visibility:visible;-webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;animation:fadein 0.5s, fadeout 0.5s 2.5s}@-webkit-keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}";
+const twintagShareCss = ":host{display:block;--background:#3c8cfa;--color:#fff;--font-family:Helvetica;--box-shadow:0 0 2px -2px rgba(29, 39, 231, 0.1), 0 0 3px 0 rgba(29, 39, 231, 0.1), 0 0 5px 0 rgba(29, 39, 231, 0.1), 0 2px 2px -4px rgba(29, 39, 231, 0.1),\n    0 4px 8px 0 rgba(29, 39, 231, 0.1), 0 2px 15px 0 rgba(29, 39, 231, 0.1);font-family:var(--font-family)}:host button{cursor:pointer}.share-container{position:fixed;left:0;right:0;top:0;bottom:0;opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:100}.share-container .share-modal-overlay{background:rgba(0, 0, 0, 0.6);width:100%;height:100%;position:absolute}.share-container .modal{position:absolute;top:50%;left:50%;width:500px;max-width:100%;font-size:1rem;border-radius:0.5rem;transform:translate(-50%, -50%);overflow:hidden}.share-container .modal .share-header{background:var(--background);color:var(--color);display:flex;align-items:center;justify-content:space-between;position:relative;padding:1rem}.share-container .modal .share-header .share-header-button{background:var(--background);color:var(--color);display:flex;position:absolute;right:0.5rem;height:auto;border:0px;outline:none}.share-container .modal .share-header .share-header-button:hover{opacity:50%}.share-container .modal .share-header .share-header-title{width:100%;margin:0;text-align:center;font-size:1.25rem;font-weight:400;line-height:1.75rem}.share-container .modal .share-content{background:#fff;padding:1rem}.share-container .modal .share-content-subtitle{display:flex;align-items:center;gap:0.5rem}.share-container .modal .share-content-anc{display:block;font-size:0.875rem;line-height:1.25rem;text-decoration:none;text-overflow:ellipsis;overflow:hidden}.share-container .modal .share-content-break{margin:0;margin-block:1rem}.share-container .modal .share-link-content{padding:0.5rem 1rem 0px;display:flex;flex-direction:column;justify-content:center;}.share-container .modal .share-link-content .copy-clip-button{color:var(--color);border:1px solid var(--background);background-color:var(--background);display:flex;align-items:center;gap:0.5rem;box-sizing:border-box;width:max-content;max-width:100%;margin:0;margin-block:0.5rem;padding:0.75rem 1.25rem;font-size:0.875rem;line-height:1.25rem;border-radius:0.25rem;outline:none;transition:all 0.3s ease-in-out}.share-container .modal .share-link-content .copy-clip-button:hover{color:var(--background);background-color:var(--color)}.share-container .modal .share-link-content .qr-code{margin:auto}.share-container .modal .share-link-content .tab{overflow:hidden;border:1px solid #ccc;background-color:#e5e3e3;display:flex;justify-content:center;border-radius:0.5rem}.share-container .modal .share-link-content .tab .tablinks{display:flex;flex-direction:column;gap:0.25rem;width:50%;padding:0.5rem;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:none;cursor:pointer}.share-container .modal .share-link-content .tab .tablinks svg,.share-container .modal .share-link-content .tab .tablinks label{margin:auto}.share-container .modal .share-link-content .tab .tablinks label{font-size:0.75rem;line-height:1rem}.share-container .modal .share-link-content .tab .tablinks .tab-icon{width:1.5rem;height:auto}.share-container .modal .share-link-content .tab .tablinks:hover{opacity:0.5}.share-container .modal .share-link-content .tab .tablinks.active{border-radius:0.5rem;border:1px solid #fff;background:#fff;box-shadow:0 0 5px rgba(0, 0, 0, 0.16);opacity:1 !important}.share-container .modal .share-link-content .tabcontent{display:none;justify-content:center;padding:1rem 1rem 0px;border:none}.share-container #snackbar{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#333;color:#fff;text-align:center;border-radius:0.25rem;padding:16px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:14px}.share-container #snackbar.show{visibility:visible;-webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;animation:fadein 0.5s, fadeout 0.5s 2.5s}.visible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.ripple{position:relative;overflow:hidden;transform:translate3d(0, 0, 0)}@media only screen and (max-width: 768px){.modal{width:100%;height:100%;border-radius:0;overflow:auto}.modal .share-content{height:100%}}@-webkit-keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}";
 
 const TwintagShare = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.onClose = index.createEvent(this, "onClose", 7);
+    this.close = index.createEvent(this, "close", 7);
     this._qrHost = '';
-    this.url = undefined;
-    this.title = undefined;
-    this.subtitle = undefined;
+    this.url = window.location.href;
+    this.modalTitle = undefined;
+    this.modalSubtitle = undefined;
     this.closeBtn = undefined;
     this.copyClipboardBtn = undefined;
-    this.open = undefined;
+    this.open = false;
   }
   closeDialog() {
     this.open = false;
-    this.onClose.emit();
+    this.close.emit();
   }
   handleKeyDown(ev) {
     if (ev.key === 'Escape') {
@@ -44,14 +44,14 @@ const TwintagShare = class {
     let i, tabcontent, tablinks;
     tabcontent = this.el.shadowRoot.querySelectorAll('.tabcontent');
     for (i = 0; i < tabcontent.length; i++) {
-      tabcontent[i].style.display = "none";
+      tabcontent[i].style.display = 'none';
     }
     tablinks = this.el.shadowRoot.querySelectorAll('.tablinks');
     for (i = 0; i < tablinks.length; i++) {
-      tablinks[i].className = tablinks[i].className.replace(" active", "");
+      tablinks[i].className = tablinks[i].className.replace(' active', '');
     }
-    this.el.shadowRoot.querySelector(`#${tabName}`).style.display = 'block';
-    evt.currentTarget.className += " active";
+    this.el.shadowRoot.querySelector(`#${tabName}`).style.display = 'flex';
+    evt.currentTarget.className += ' active';
   }
   copyToClipboard() {
     navigator.clipboard.writeText(this.url).then(_ => {
@@ -61,13 +61,21 @@ const TwintagShare = class {
     });
   }
   showSnackbar(msg) {
-    var x = this.el.shadowRoot.querySelector("#snackbar");
-    x.className = "show";
+    var x = this.el.shadowRoot.querySelector('#snackbar');
+    x.className = 'show';
     x.innerHTML = msg;
-    setTimeout(() => { x.className = x.className.replace("show", ""); }, 3000);
+    setTimeout(() => {
+      x.className = x.className.replace('show', '');
+    }, 3000);
   }
   render() {
-    return (index.h("div", { class: this.open ? 'share-container visible' : 'share-container' }, index.h("div", { class: 'share-modal-overlay', onClick: () => this.closeDialog() }), index.h("div", { class: 'modal' }, index.h("div", { class: 'share-header' }, index.h("span", { class: 'share-header-title' }, this.title ? this.title : 'Share your twintag'), index.h("button", { class: 'share-header-button', onClick: () => this.closeDialog() }, this.closeBtn ? this.closeBtn : 'CLOSE')), index.h("div", { class: 'share-content' }, index.h("div", { class: 'share-content-subtitle' }, this.subtitle ? this.subtitle : 'Share link'), index.h("a", { class: 'share-content-anc', href: this.url, target: "_blank" }, this.url), index.h("hr", { class: 'share-content-break' }), index.h("div", { class: 'share-link-content' }, index.h("div", { class: 'tab' }, index.h("div", { class: 'tab-header tablinks active', onClick: (event) => this.clickHandle(event, 'link') }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tab-icon", viewBox: "0 0 512 512" }, index.h("title", null, "Link"), index.h("path", { d: "M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "36" })), index.h("label", { class: 'tablinks-label' }, "Link")), index.h("div", { class: 'tab-header tablinks', onClick: (event) => this.clickHandle(event, 'qr') }, index.h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 512 512", class: "tab-icon" }, index.h("path", { d: "M160 32h-128v128h128v-128zM192 0v0 192h-192v-192h192zM64 64h64v64h-64zM480 32h-128v128h128v-128zM512 0v0 192h-192v-192h192zM384 64h64v64h-64zM160 352h-128v128h128v-128zM192 320v0 192h-192v-192h192zM64 384h64v64h-64zM224 0h32v32h-32zM256 32h32v32h-32zM224 64h32v32h-32zM256 96h32v32h-32zM224 128h32v32h-32zM256 160h32v32h-32zM224 192h32v32h-32zM224 256h32v32h-32zM256 288h32v32h-32zM224 320h32v32h-32zM256 352h32v32h-32zM224 384h32v32h-32zM256 416h32v32h-32zM224 448h32v32h-32zM256 480h32v32h-32zM480 256h32v32h-32zM32 256h32v32h-32zM64 224h32v32h-32zM0 224h32v32h-32zM128 224h32v32h-32zM160 256h32v32h-32zM192 224h32v32h-32zM288 256h32v32h-32zM320 224h32v32h-32zM352 256h32v32h-32zM384 224h32v32h-32zM416 256h32v32h-32zM448 224h32v32h-32zM480 320h32v32h-32zM288 320h32v32h-32zM320 288h32v32h-32zM352 320h32v32h-32zM416 320h32v32h-32zM448 288h32v32h-32zM480 384h32v32h-32zM288 384h32v32h-32zM320 352h32v32h-32zM384 352h32v32h-32zM416 384h32v32h-32zM448 352h32v32h-32zM480 448h32v32h-32zM320 416h32v32h-32zM352 448h32v32h-32zM384 416h32v32h-32zM416 448h32v32h-32zM320 480h32v32h-32zM384 480h32v32h-32zM448 480h32v32h-32z" })), index.h("label", { class: 'tablinks-label' }, "QR Code"))), index.h("div", { id: "link", class: 'tabcontent', style: { display: 'block' } }, index.h("button", { class: 'copy-clip-button ripple', onClick: () => this.copyToClipboard() }, this.copyClipboardBtn ? this.copyClipboardBtn : 'Copy link to clipboard')), index.h("div", { id: "qr", class: 'tabcontent qr-code', style: { display: 'none' } }, index.h("img", { src: this._qrHost }))))), index.h("div", { id: "snackbar" })));
+    return (index.h("div", { class: `share-container ${this.open ? 'visible' : ''}` }, index.h("div", { class: 'share-modal-overlay', onClick: () => this.closeDialog() }), index.h("div", { class: 'modal' }, index.h("div", { class: 'share-header' }, index.h("h2", { class: 'share-header-title' }, this.modalTitle ? this.modalTitle : 'Share your twintag'), index.h("button", { class: 'share-header-button', onClick: () => this.closeDialog() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", style: {
+        width: '1.5rem',
+        height: '1.5rem',
+      } }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18L18 6M6 6l12 12" })))), index.h("div", { class: 'share-content' }, index.h("a", { class: 'share-content-anc', href: this.url, target: "_blank" }, this.url), index.h("hr", { class: 'share-content-break' }), index.h("div", { class: 'share-link-content' }, index.h("div", { class: 'tab' }, index.h("div", { class: 'tablinks active', onClick: event => this.clickHandle(event, 'link') }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tab-icon", viewBox: "0 0 512 512" }, index.h("title", null, "Link"), index.h("path", { d: "M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "36" })), index.h("label", { class: 'tablinks-label' }, "Link")), index.h("div", { class: 'tablinks', onClick: event => this.clickHandle(event, 'qr') }, index.h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 512 512", class: "tab-icon" }, index.h("path", { d: "M160 32h-128v128h128v-128zM192 0v0 192h-192v-192h192zM64 64h64v64h-64zM480 32h-128v128h128v-128zM512 0v0 192h-192v-192h192zM384 64h64v64h-64zM160 352h-128v128h128v-128zM192 320v0 192h-192v-192h192zM64 384h64v64h-64zM224 0h32v32h-32zM256 32h32v32h-32zM224 64h32v32h-32zM256 96h32v32h-32zM224 128h32v32h-32zM256 160h32v32h-32zM224 192h32v32h-32zM224 256h32v32h-32zM256 288h32v32h-32zM224 320h32v32h-32zM256 352h32v32h-32zM224 384h32v32h-32zM256 416h32v32h-32zM224 448h32v32h-32zM256 480h32v32h-32zM480 256h32v32h-32zM32 256h32v32h-32zM64 224h32v32h-32zM0 224h32v32h-32zM128 224h32v32h-32zM160 256h32v32h-32zM192 224h32v32h-32zM288 256h32v32h-32zM320 224h32v32h-32zM352 256h32v32h-32zM384 224h32v32h-32zM416 256h32v32h-32zM448 224h32v32h-32zM480 320h32v32h-32zM288 320h32v32h-32zM320 288h32v32h-32zM352 320h32v32h-32zM416 320h32v32h-32zM448 288h32v32h-32zM480 384h32v32h-32zM288 384h32v32h-32zM320 352h32v32h-32zM384 352h32v32h-32zM416 384h32v32h-32zM448 352h32v32h-32zM480 448h32v32h-32zM320 416h32v32h-32zM352 448h32v32h-32zM384 416h32v32h-32zM416 448h32v32h-32zM320 480h32v32h-32zM384 480h32v32h-32zM448 480h32v32h-32z" })), index.h("label", { class: 'tablinks-label' }, "QR Code"))), index.h("div", { id: "link", class: 'tabcontent', style: { display: 'flex' } }, index.h("button", { class: 'copy-clip-button ripple', onClick: () => this.copyToClipboard() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", style: {
+        width: '1.25rem',
+        height: '1.25rem',
+      } }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" })), index.h("span", null, this.copyClipboardBtn ? this.copyClipboardBtn : 'Copy link'))), index.h("div", { id: "qr", class: 'tabcontent qr-code', style: { display: 'none' } }, index.h("img", { src: this._qrHost }))))), index.h("div", { id: "snackbar" })));
   }
   get el() { return index.getElement(this); }
 };

package/dist/collection/components/twintag-scanner/twintag-scanner.js

@@ -61,14 +61,7 @@ export class TwintagScanner {
     this.errorText = '';
     this.noPermission = false;
   }
-  componentWillLoad() {
-    this.codeReader = new ZXingReader({
-      codeReader: null,
-      formats: this.possibleFormats,
-      tryHarder: this.tryHarder,
-    });
-    if (this.open)
-      this.openCameraHandler();
+  connectedCallback() {
     if (this.ocrScanner) {
       (async () => {
         this.worker = createWorker();
@@ -77,6 +70,8 @@ export class TwintagScanner {
         await this.worker.initialize('eng');
       })();
     }
+    if (this.open)
+      this.openCameraHandler();
   }
   componentDidLoad() {
     this.osCanvas = document.createElement('canvas');
@@ -152,8 +147,8 @@ export class TwintagScanner {
         this.osCanvas.height = sHeight;
         this.resize();
       }
-      if (!this.scanning) {
-        this.scanning = true;
+      if (!this.isScanning) {
+        this.isScanning = true;
         this.osContext.drawImage(this.video, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
         this.scan();
       }
@@ -189,7 +184,12 @@ export class TwintagScanner {
     let symbols = [];
     try {
       if (!this.ocrScanner) {
-        symbols = this.codeReader.readFromCanvas(this.osCanvas);
+        const codeReader = new ZXingReader({
+          codeReader: null,
+          formats: this.possibleFormats,
+          tryHarder: this.tryHarder,
+        });
+        symbols = codeReader.readFromCanvas(this.osCanvas);
       }
       // To control when to scan using OCR
       if (this.ocrIsScanning) {
@@ -217,8 +217,8 @@ export class TwintagScanner {
     }
     let emitted = false;
     for (const symbol of symbols) {
-      if (symbol.Text !== ((_a = this.lastScan) === null || _a === void 0 ? void 0 : _a.Text)) {
-        this.lastScan = symbol;
+      if (symbol.Text !== ((_a = this.lastScannedSymbol) === null || _a === void 0 ? void 0 : _a.Text)) {
+        this.lastScannedSymbol = symbol;
         this.emitResult(symbol);
         emitted = true;
       }
@@ -227,7 +227,7 @@ export class TwintagScanner {
       this.showProcessedCheck();
       this.stopStream();
     }
-    this.scanning = false;
+    this.isScanning = false;
   }
   showProcessedCheck() {
     const tl = gsap.timeline();
@@ -248,7 +248,7 @@ export class TwintagScanner {
       },
     });
   }
-  async stopStream() {
+  stopStream() {
     window.localStream.getTracks().forEach((track) => {
       gsap.to(this.videoContainerRef, {
         duration: 0.2,
@@ -260,14 +260,17 @@ export class TwintagScanner {
       });
       return track.stop();
     });
-    if (this.ocrScanner)
-      await this.worker.terminate();
-    this.lastScan = null;
+    if (this.ocrScanner) {
+      (async () => {
+        await this.worker.terminate();
+      })();
+    }
+    this.lastScannedSymbol = null;
   }
   emitResult(symbol) {
     /* Taking a screenshot of the canvas and then emitting the result. */
     this.frameCapture = this.osCanvas.toDataURL();
-    this.onSymbol.emit({
+    this.symbol.emit({
       Text: symbol.Text,
       Format: symbol.Format,
       Frame: this.frameCapture,
@@ -287,6 +290,9 @@ export class TwintagScanner {
       this.app.resize(this.stageHeight * spRatio, this.stageHeight);
     }
   }
+  disconnectedCallback() {
+    this.closeCameraHandler();
+  }
   render() {
     return (h(Host, null, this.noPermission ? h("div", null, this.errorText) : null, h("div", { class: "icon-container" }, this.customCheckIcon ? (h("img", { class: "check-icon", src: this.customCheckIcon, ref: (el) => (this.successIcon = el) })) : (h("svg", { class: "check-icon", ref: (el) => (this.successIcon = el), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 150 150", width: "150px", height: "150px" }, h("g", null, h("path", { style: {
         stroke: 'none',
@@ -517,8 +523,8 @@ export class TwintagScanner {
   }
   static get events() {
     return [{
-        "method": "onSymbol",
-        "name": "onSymbol",
+        "method": "symbol",
+        "name": "symbol",
         "bubbles": true,
         "cancelable": true,
         "composed": true,