UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

7 lines 11.8 kB
import {b}from'./chunk-YJ42KEYE.js';import {a as a$8}from'./chunk-WGZHL6TO.js';import {a as a$9}from'./chunk-7J6MRLL2.js';import {a as a$2}from'./chunk-YH5IBNOK.js';import {a as a$7}from'./chunk-5GGUCEGU.js';import {b as b$1}from'./chunk-EWLALL5J.js';import {a as a$6}from'./chunk-AO7NE6M4.js';import {a}from'./chunk-WRTJHOS5.js';import {a as a$4}from'./chunk-TFYQKG6K.js';import {a as a$5}from'./chunk-POONUNDO.js';import {b as b$2}from'./chunk-IHFZ5YLD.js';import {a as a$1}from'./chunk-7GJVUU3G.js';import {a as a$3}from'./chunk-I53W7VSB.js';import {b as b$3}from'./chunk-OLJXVUYE.js';import {Anchor,Localization,DataCaptureView,Size,Point}from'@scandit/web-datacapture-core';import {ShutterButton}from'@scandit/web-datacapture-core/build/js/private/ui/atoms/ShutterButton.js';import {ScanditHTMLElement}from'@scandit/web-datacapture-core/build/js/private/utils/ScanditHTMLElement.js';import {defineCustomElements}from'@scandit/web-datacapture-core/build/js/private/utils/defineCustomElements.js';import {html}from'@scandit/web-datacapture-core/build/js/private/utils/html.js';import {Card}from'@scandit/web-datacapture-core/build/js/private/ui/atoms/Card.js';var l={FinishButton:a$2.tag,ShutterButton:ShutterButton.tag,ProgressBarWithLabel:a.tag,CardListContainer:b$1.tag,TorchIconButton:a$1.tag},h=class h extends ScanditHTMLElement{constructor(){super(...arguments);this.shouldShowCarousel=true;this.shouldShowPauseButton=true;this.shouldShowFinishButton=true;this.shouldShowProgressBar=true;this.shouldShowTorchControl=false;this.torchControlPosition=Anchor.TopLeft;this.textForItemListUpdatedWhenPausedHint=null;this.textForItemListUpdatedHint=null;this.textForTapShutterToResumeSearchHint=null;this.textForTapShutterToPauseScreenHint=null;this.textForMoveCloserToBarcodesHint=null;this.textForPointAtBarcodesToSearchHint=null;this.textForAllItemsFoundSuccessfullyHint=null;this.textForCollapseCardsButton=Localization.getInstance().get("barcode.find.view.textForCollapseCardsButton");this.barcodeFindViewUiListener=null;this.shutterButton=null;this.finishButton=null;this.progressBar=null;this.cardList=null;this.onShutterButtonClickedHandler=this.onShutterButtonClicked.bind(this);this.onFinishButtonClickedHandler=this.onFinishButtonClicked.bind(this);this.onTorchButtonClickedHandler=this.onTorchButtonClicked.bind(this);this.torchIconButton=null;this.onDotClickHandler=this.onDotClick.bind(this);}get camera(){return this.presenter.context.frameSource}static async createWithSettings(t,o,i,s,r){let e=document.createElement(h.tag);return e.barcodeFindViewSettings=s,e.layout=b.create(),e.layout.innerHTML=html` <${a.tag} slot="progress" value="0" max="1" ${e.shouldShowProgressBar?"":"hidden"}></${a.tag}> <${a$1.tag} slot="top-controls-left" ${e.shouldShowTorchControl?"":"hidden"}></${a$1.tag}> <${b$1.tag} slot="card-list" hidden text-for-collapse-cards-button=${e.textForCollapseCardsButton}></${b$1.tag}> <${ShutterButton.tag} slot="bottom-controls-center" variant="play" ${e.shouldShowPauseButton?"":"hidden"}></${ShutterButton.tag}> <${a$2.tag} slot="bottom-controls-right" ${e.shouldShowFinishButton?"":"hidden"}></${a$2.tag}> `,e.append(e.layout),a$3(t)?(e.dataCaptureView=t,t.htmlElement.prepend(e),await o.setMode(i),await t.setContext(o)):(e.dataCaptureView=await DataCaptureView.forContext(o),e.dataCaptureView.connectToElement(t),t.prepend(e)),e.presenter=new b$2(e,o,i,s,r!=null?r:a$4.recommendedCameraSettings),await e.presenter.prepare(),e.barcodeFindBasicOverlay=await a$5.withBarcodeFind(i,e.dataCaptureView),e}static async create(t,o,i){return h.createWithSettings(t,o,i,b$3.BarcodeFind.BarcodeFindViewSettings.settings,a$4.recommendedCameraSettings)}static register(){defineCustomElements({[h.tag]:h});}async startSearching(){return this.onShutterButtonClickedHandler()}async stopSearching(){return this.presenter.stopSearching()}async pauseSearching(){return this.onShutterButtonClickedHandler()}setListener(t){this.barcodeFindViewUiListener=t,this.presenter.barcodeFindViewUiListener=this.barcodeFindViewUiListener;}async setShouldShowUserGuidanceView(t){return this.shouldShowUserGuidance=t,this.barcodeFindBasicOverlay.setUserGuidanceEnabled(this.shouldShowUserGuidance)}async setShouldShowHints(t){return this.shouldShowHints=t,this.barcodeFindBasicOverlay.setShouldShowHint(this.shouldShowHints)}setShouldShowCarousel(t){this.shouldShowCarousel=t,this.layout.toggleVisibility(l.CardListContainer,t);}setShouldShowPauseButton(t){this.shouldShowPauseButton=t,this.layout.toggleVisibility(l.ShutterButton,t);}setShouldShowFinishButton(t){this.shouldShowFinishButton=t,this.layout.toggleVisibility(l.FinishButton,t);}setShouldShowProgressBar(t){this.shouldShowProgressBar=t,this.layout.toggleVisibility(l.ProgressBarWithLabel,t);}setShouldShowTorchControl(t){this.shouldShowTorchControl=this.presenter.isTorchAvailable?t:false,this.layout.toggleVisibility(l.TorchIconButton,this.shouldShowTorchControl);}setTorchControlPosition(t){var i;this.torchControlPosition=t,[Anchor.TopCenter,Anchor.TopLeft,Anchor.TopRight,Anchor.BottomLeft].includes(t)||(this.torchControlPosition=Anchor.TopLeft);let o={[Anchor.TopCenter]:"top-controls-center",[Anchor.TopLeft]:"top-controls-left",[Anchor.TopRight]:"top-controls-right",[Anchor.BottomLeft]:"bottom-controls-left"}[this.torchControlPosition];(i=this.torchIconButton)==null||i.setAttribute("slot",o);}setTextForCollapseCardsButton(t){this.textForCollapseCardsButton=t,this.cardList!=null&&(this.cardList["text-for-collapse-cards-button"]=t);}async setTextForAllItemsFoundSuccessfullyHint(t){return this.textForAllItemsFoundSuccessfullyHint=t,this.barcodeFindBasicOverlay.setTextForAllItemsFoundSuccessfullyHint(this.textForAllItemsFoundSuccessfullyHint)}async setTextForPointAtBarcodesToSearchHint(t){return this.textForPointAtBarcodesToSearchHint=t,this.barcodeFindBasicOverlay.setTextForPointAtBarcodesToSearchHint(this.textForPointAtBarcodesToSearchHint)}async setTextForMoveCloserToBarcodesHint(t){return this.textForMoveCloserToBarcodesHint=t,this.barcodeFindBasicOverlay.setTextForPointAtBarcodesToSearchHint(this.textForMoveCloserToBarcodesHint)}async setTextForTapShutterToPauseScreenHint(t){return this.textForTapShutterToPauseScreenHint=t,this.barcodeFindBasicOverlay.setTextForPointAtBarcodesToSearchHint(this.textForTapShutterToPauseScreenHint)}async setTextForTapShutterToResumeSearchHint(t){return this.textForTapShutterToResumeSearchHint=t,this.barcodeFindBasicOverlay.setTextForTapShutterToResumeScreenHint(this.textForTapShutterToResumeSearchHint)}async setTextForItemListUpdatedWhenPausedHint(t){return this.textForItemListUpdatedWhenPausedHint=t,this.barcodeFindBasicOverlay.setTextForItemListUpdatedWhenPausedHint(this.textForItemListUpdatedWhenPausedHint)}async setTextForItemListUpdatedHint(t){return this.textForItemListUpdatedHint=t,this.barcodeFindBasicOverlay.setTextForItemListUpdatedWhenPausedHint(this.textForItemListUpdatedHint)}connectedCallback(){var t,o,i;this.shutterButton=this.layout.querySelector(l.ShutterButton),this.finishButton=this.layout.querySelector(l.FinishButton),this.progressBar=this.layout.querySelector(l.ProgressBarWithLabel),this.cardList=this.layout.querySelector(l.CardListContainer),this.torchIconButton=this.layout.querySelector(l.TorchIconButton),(t=this.torchIconButton)==null||t.addEventListener("pointerdown",this.onTorchButtonClickedHandler),(o=this.shutterButton)==null||o.addEventListener("pointerdown",this.onShutterButtonClickedHandler),(i=this.finishButton)==null||i.addEventListener("pointerdown",this.onFinishButtonClickedHandler),this.layout.addEventListener("onlayouttap",this.onDotClickHandler);}disconnectedCallback(){var t,o,i;(t=this.shutterButton)==null||t.removeEventListener("pointerdown",this.onShutterButtonClickedHandler),(o=this.torchIconButton)==null||o.addEventListener("pointerdown",this.onTorchButtonClickedHandler),(i=this.finishButton)==null||i.removeEventListener("pointerdown",this.onFinishButtonClickedHandler),this.layout.removeEventListener("onlayouttap",this.onDotClickHandler),this.presenter.dispose();}async onShutterButtonClicked(){this.presenter.onShutterButtonClicked();}async onTorchButtonClicked(){this.presenter.onTorchButtonClicked();}updateProgressBar(t,o){this.progressBar&&(this.progressBar.value!==t&&(this.progressBar.value=t),o!=null&&this.progressBar.max!==o&&(this.progressBar.max=o));}setShutterButtonPulse(t){this.shutterButton!=null&&(this.shutterButton.pulse=t);}switchToPaused(t,o){var s,r,e,u,a,m,B,w,L,P,H,x;let i=[];for(let c of t){let F=Card.create();F.id=`${String(c.uid)}`;let p=a$6.create();if(F.append(p),p.title=(r=(s=c.content)==null?void 0:s.info)!=null?r:c.searchOptions.barcodeData,((e=c.content)==null?void 0:e.additionalInfo)!=null&&(p.subtitle=(a=(u=c.content)==null?void 0:u.additionalInfo)!=null?a:""),o.find(n=>n.searchOptions.barcodeData===c.searchOptions.barcodeData)!=null){let n=a$7.create();n.slot="right",p.append(n);}if(((m=c.content)==null?void 0:m.image)==null){let n=a$8.create();n.slot="image-left",p.append(n);}else {let n=document.createElement("img");n.slot="image-left",n.src=(w=(B=c.content)==null?void 0:B.image)!=null?w:"",n.alt=(P=(L=c.content)==null?void 0:L.additionalInfo)!=null?P:"",p.append(n);}i.push(F);}(H=this.cardList)==null||H.renderCards(i),(x=this.cardList)==null||x.removeAttribute("hidden"),this.shutterButton.variant="play",this.shutterButton.pulse=false,this.toggleDotPulse(false);}moveCardOnTheFront(t){var i,s;if(!t)return;let o=(i=this.cardList)==null?void 0:i.getCardBySelector(`${Card.tag}#${t.uid}`);o!=null&&((s=this.cardList)==null||s.unshiftCard(o));}switchToStarted(){var t;this.clearDots(),(t=this.cardList)==null||t.setAttribute("hidden",""),this.shutterButton.variant="pause";}toggleTorchIcon(t){this.torchIconButton&&(this.torchIconButton.state=t);}onFinishButtonClicked(){this.presenter.onFinishButtonClicked();}clearDots(){let t=this.layout.querySelectorAll("[data-identifier]");for(let o of t)o.remove();}toggleDotPulse(t){let o=[...this.layout.querySelectorAll("[data-identifier]")];for(let i of o)i.pulse=t;}pointTransformation(t){return `translate3d(calc(${t.x}px - 50%), calc(${t.y}px - 50%), 0px)`}onDotClick(t){let o=t.detail.target;if(o.dataset.identifier!=null){for(let i of this.layout.querySelectorAll(a$9.tag))i.pulse=false,o===i&&o.variant==="target"&&(o.pulse=true);this.presenter.onDotClick(o.dataset.identifier);}}renderDots(t){var o,i,s;for(let r of t.removedTrackedBarcodes){let e=this.layout.querySelector(`[data-identifier="${r}"]`);e==null||e.remove();}if(t.addedTrackedBarcodes.length>0){let r=document.createDocumentFragment();for(let e of t.addedTrackedBarcodes){let u=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(e.anchorPositions),a=a$9.createWithColors(this.barcodeFindViewSettings.inListItemColor,this.barcodeFindViewSettings.notInListItemColor);a.style.setProperty("position","absolute"),a.style.setProperty("transform",this.pointTransformation(u.center)),a.dataset.identifier=`${e.identifier}`,e.barcode.data!=null&&((o=t.foundTrackedBarcodesInLastProcessedFrame[`${e.identifier}`])==null?void 0:o.barcode.data)===e.barcode.data&&(a.setAttribute("variant","target"),a.pulse=true),r.append(a);}this.layout.append(r);}for(let r of t.updatedTrackedBarcodes){let e=this.layout.querySelector(`[data-identifier="${r.identifier}"]`),{center:u}=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(r.anchorPositions);if(e){let a=(s=(i=this.camera)==null?void 0:i.getMirrorImageEnabled())!=null?s:false,m=new Size(this.dataCaptureView.width,this.dataCaptureView.height);e.style.setProperty("position","absolute");let B=a?Point.mirrorX(u,m):u;e.style.setProperty("transform",this.pointTransformation(B));}}}};h.tag="scandit-barcode-find-view";var y=h;y.register();export{y as a};