UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 12.4 kB
import {a as a$7}from'./chunk-ZPKXVCG3.js';import {b as b$1}from'./chunk-3N7HH72O.js';import {a as a$6}from'./chunk-TKSABJXC.js';import {a}from'./chunk-HHYYL23G.js';import {b}from'./chunk-5V3FWMGO.js';import {a as a$8}from'./chunk-RZWYP24A.js';import {a as a$9}from'./chunk-PJKEAS4K.js';import {a as a$1}from'./chunk-DDLFCE34.js';import {b as b$2}from'./chunk-6KDQGEUY.js';import {a as a$3}from'./chunk-AKBHAMGH.js';import {a as a$4}from'./chunk-POONUNDO.js';import {a as a$5}from'./chunk-DHKABHFE.js';import {a as a$2}from'./chunk-I53W7VSB.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';import {TorchSwitchIconButton}from'@scandit/web-datacapture-core/build/js/private/ui/molecules/TorchSwitchIconButton.js';var l={FinishButton:a$1.tag,ShutterButton:ShutterButton.tag,ProgressBarWithLabel:a.tag,CardListContainer:b$1.tag,TorchSwitchIconButton:TorchSwitchIconButton.tag},u=class u extends ScanditHTMLElement{constructor(){super(...arguments);this.shouldShowCarousel=true;this.shouldShowPauseButton=true;this.shouldShowFinishButton=true;this.shouldShowProgressBar=true;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.torchSwitchIconButton=null;this._shouldShowTorchControl=false;this._isTorchAvailable=false;this.onDotClickHandler=this.onDotClick.bind(this);}set shouldShowTorchControl(t){this._shouldShowTorchControl=t,this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.hidden=!(t&&this._isTorchAvailable));}get shouldShowTorchControl(){return this._shouldShowTorchControl}get camera(){return this.presenter.context.frameSource}static async createWithSettings(t,o,i,s,r){let e=document.createElement(u.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}><${TorchSwitchIconButton.tag} slot="top-controls-left" ${e.shouldShowTorchControl?"":"hidden"}></${TorchSwitchIconButton.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$1.tag} slot="bottom-controls-right" ${e.shouldShowFinishButton?"":"hidden"}></${a$1.tag}>`,e.append(e.layout),a$2(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$3.recommendedCameraSettings),await e.presenter.prepare(),e.barcodeFindBasicOverlay=await a$4.withBarcodeFind(i,e.dataCaptureView),e}static async create(t,o,i){return u.register(),u.createWithSettings(t,o,i,a$5.BarcodeFindViewSettings.settings,a$3.recommendedCameraSettings)}static register(){defineCustomElements({[u.tag]:u,[TorchSwitchIconButton.tag]:TorchSwitchIconButton,[ShutterButton.tag]:ShutterButton,[a.tag]:a,[b$1.tag]:b$1,[a$1.tag]:a$1,[b.tag]:b});}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=t;}setTorchAvailable(t){this._isTorchAvailable=t,this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.hidden=!(this._shouldShowTorchControl&&this._isTorchAvailable));}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.torchSwitchIconButton)==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.torchSwitchIconButton=this.layout.querySelector(l.TorchSwitchIconButton),(t=this.torchSwitchIconButton)==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.torchSwitchIconButton)==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,h,a,g,f,y,L,P,H,x;let i=[];for(let c of t){let C=Card.create();C.id=`${String(c.uid)}`;let p=a$6.create();if(C.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=(h=c.content)==null?void 0:h.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(((g=c.content)==null?void 0:g.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=(y=(f=c.content)==null?void 0:f.image)!=null?y:"",n.alt=(P=(L=c.content)==null?void 0:L.additionalInfo)!=null?P:"",p.append(n);}i.push(C);}(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.torchSwitchIconButton&&(this.torchSwitchIconButton.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 h=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(h.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:h}=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(r.anchorPositions);if(e){let a=(s=(i=this.camera)==null?void 0:i.getMirrorImageEnabled())!=null?s:false,g=new Size(this.dataCaptureView.width,this.dataCaptureView.height);e.style.setProperty("position","absolute");let f=a?Point.mirrorX(h,g):h;e.style.setProperty("transform",this.pointTransformation(f));}}}};u.tag="scandit-barcode-find-view";var O=u;export{O as a};