UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 13.9 kB
import {a as a$6}from'./chunk-TKSABJXC.js';import {a}from'./chunk-HHYYL23G.js';import {a as a$9}from'./chunk-5A3VQBKX.js';import {a as a$1}from'./chunk-DDLFCE34.js';import {a as a$7}from'./chunk-ZPKXVCG3.js';import {b}from'./chunk-5V3FWMGO.js';import {b as b$1}from'./chunk-3N7HH72O.js';import {a as a$8}from'./chunk-RZWYP24A.js';import {a as a$3}from'./chunk-D3EYLYMV.js';import {a as a$4}from'./chunk-POONUNDO.js';import {b as b$2}from'./chunk-M7SLG4OU.js';import {a as a$5}from'./chunk-DHKABHFE.js';import {a as a$2}from'./chunk-I53W7VSB.js';import {Anchor,Localization,DataCaptureView,ZoomSwitchControl,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 c={FinishButton:a$1.tag,ShutterButton:ShutterButton.tag,ProgressBarWithLabel:a.tag,CardListContainer:b$1.tag,TorchSwitchIconButton:TorchSwitchIconButton.tag},h=class h extends ScanditHTMLElement{constructor(){super(...arguments);this.shouldShowCarousel=true;this.shouldShowPauseButton=true;this.shouldShowFinishButton=true;this.shouldShowProgressBar=true;this.torchControlPosition=Anchor.TopLeft;this.zoomControlPosition=Anchor.TopRight;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.zoomSwitchControl=null;this._shouldShowZoomControl=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}set shouldShowZoomControl(t){var e;this._shouldShowZoomControl=t;let o=(e=this.zoomSwitchControl)==null?void 0:e.zoomSwitchPill;o!=null&&(o.hidden=!t);}get shouldShowZoomControl(){return this._shouldShowZoomControl}get camera(){return this.presenter.context.frameSource}static async createWithSettings(t,o,e,n,s){let i=document.createElement(h.tag);i.barcodeFindViewSettings=n,i.layout=b.create(),i.layout.innerHTML=html`<${a.tag} slot="progress" value="0" max="1" ${i.shouldShowProgressBar?"":"hidden"}></${a.tag}><${TorchSwitchIconButton.tag} slot="top-controls-left" ${i.shouldShowTorchControl?"":"hidden"}></${TorchSwitchIconButton.tag}><${b$1.tag} slot="card-list" hidden text-for-collapse-cards-button=${i.textForCollapseCardsButton}></${b$1.tag}><${ShutterButton.tag} slot="bottom-controls-center" variant="play" ${i.shouldShowPauseButton?"":"hidden"}></${ShutterButton.tag}><${a$1.tag} slot="bottom-controls-right" ${i.shouldShowFinishButton?"":"hidden"}></${a$1.tag}>`,i.append(i.layout),a$2(t)?(i.dataCaptureView=t,t.htmlElement.prepend(i),await o.setMode(e),await t.setContext(o)):(i.dataCaptureView=await DataCaptureView.forContext(o),i.dataCaptureView.connectToElement(t),t.prepend(i));let a$5=s!=null?s:a$3.recommendedCameraSettings;return a$5.zoomLevels=[.5,1],i.presenter=new b$2(i,o,e,n,a$5),await i.presenter.prepare(),await i.installZoomControl(),i.barcodeFindBasicOverlay=await a$4.withBarcodeFind(e,i.dataCaptureView),i}static async create(t,o,e){return h.register(),h.createWithSettings(t,o,e,a$5.BarcodeFindViewSettings.settings,a$3.recommendedCameraSettings)}static register(){defineCustomElements({[h.tag]:h,[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(c.CardListContainer,t);}setShouldShowPauseButton(t){this.shouldShowPauseButton=t,this.layout.toggleVisibility(c.ShutterButton,t);}setShouldShowFinishButton(t){this.shouldShowFinishButton=t,this.layout.toggleVisibility(c.FinishButton,t);}setShouldShowProgressBar(t){this.shouldShowProgressBar=t,this.layout.toggleVisibility(c.ProgressBarWithLabel,t);}setShouldShowTorchControl(t){this.shouldShowTorchControl=t;}setShouldShowZoomControl(t){this.shouldShowZoomControl=t;}setTorchAvailable(t){this._isTorchAvailable=t,this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.hidden=!(this._shouldShowTorchControl&&this._isTorchAvailable));}setTorchControlPosition(t){var e;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];(e=this.torchSwitchIconButton)==null||e.setAttribute("slot",o);}setZoomControlPosition(t){var n;this.zoomControlPosition=t,[Anchor.TopCenter,Anchor.TopLeft,Anchor.TopRight,Anchor.BottomLeft].includes(t)||(this.zoomControlPosition=Anchor.TopRight);let o={[Anchor.TopCenter]:"top-controls-center",[Anchor.TopLeft]:"top-controls-left",[Anchor.TopRight]:"top-controls-right",[Anchor.BottomLeft]:"bottom-controls-left"}[this.zoomControlPosition],e=(n=this.zoomSwitchControl)==null?void 0:n.zoomSwitchPill;e==null||e.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.setTextForMoveCloserToBarcodesHint(this.textForMoveCloserToBarcodesHint)}async setTextForTapShutterToPauseScreenHint(t){return this.textForTapShutterToPauseScreenHint=t,this.barcodeFindBasicOverlay.setTextForTapShutterToPauseScreenHint(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.setTextForItemListUpdatedHint(this.textForItemListUpdatedHint)}connectedCallback(){var t,o,e;this.shutterButton=this.layout.querySelector(c.ShutterButton),this.finishButton=this.layout.querySelector(c.FinishButton),this.progressBar=this.layout.querySelector(c.ProgressBarWithLabel),this.cardList=this.layout.querySelector(c.CardListContainer),this.torchSwitchIconButton=this.layout.querySelector(c.TorchSwitchIconButton),(t=this.torchSwitchIconButton)==null||t.addEventListener("pointerdown",this.onTorchButtonClickedHandler),(o=this.shutterButton)==null||o.addEventListener("pointerdown",this.onShutterButtonClickedHandler),(e=this.finishButton)==null||e.addEventListener("pointerdown",this.onFinishButtonClickedHandler),this.layout.addEventListener("onlayouttap",this.onDotClickHandler);}disconnectedCallback(){var t,o,e,n;(t=this.shutterButton)==null||t.removeEventListener("pointerdown",this.onShutterButtonClickedHandler),(o=this.torchSwitchIconButton)==null||o.addEventListener("pointerdown",this.onTorchButtonClickedHandler),(e=this.finishButton)==null||e.removeEventListener("pointerdown",this.onFinishButtonClickedHandler),this.layout.removeEventListener("onlayouttap",this.onDotClickHandler),(n=this.zoomSwitchControl)==null||n.remove(),this.presenter.dispose();}async installZoomControl(){this.zoomSwitchControl=new ZoomSwitchControl,await this.zoomSwitchControl.install(this.dataCaptureView);let t=this.zoomSwitchControl.zoomSwitchPill;t!=null&&(t.setAttribute("slot","top-controls-right"),t.hidden=!this._shouldShowZoomControl,this.layout.append(t));}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 n,s,i,a,u,p,m,y,L,P,H,x;let e=[];for(let d of t){let w=Card.create();w.id=`${String(d.uid)}`;let B=a$6.create();if(w.append(B),B.title=(s=(n=d.content)==null?void 0:n.info)!=null?s:d.searchOptions.barcodeData,((i=d.content)==null?void 0:i.additionalInfo)!=null&&(B.subtitle=(u=(a=d.content)==null?void 0:a.additionalInfo)!=null?u:""),o.find(l=>l.searchOptions.barcodeData===d.searchOptions.barcodeData)!=null){let l=a$7.create();l.slot="right",B.append(l);}if(((p=d.content)==null?void 0:p.image)==null){let l=a$8.create();l.slot="image-left",B.append(l);}else {let l=document.createElement("img");l.slot="image-left",l.src=(y=(m=d.content)==null?void 0:m.image)!=null?y:"",l.alt=(P=(L=d.content)==null?void 0:L.additionalInfo)!=null?P:"",B.append(l);}e.push(w);}(H=this.cardList)==null||H.renderCards(e),(x=this.cardList)==null||x.removeAttribute("hidden"),this.shutterButton.variant="play",this.shutterButton.pulse=false,this.toggleDotPulse(false);}moveCardOnTheFront(t){var e,n;if(!t)return;let o=(e=this.cardList)==null?void 0:e.getCardBySelector(`${Card.tag}#${t.uid}`);o!=null&&((n=this.cardList)==null||n.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 e of o)e.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 e of this.layout.querySelectorAll(a$9.tag))e.pulse=false,o===e&&o.variant==="target"&&(o.pulse=true);this.presenter.onDotClick(o.dataset.identifier);}}createDotForTrackedBarcode(t,o,e){var u,p,m;let n=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(t.anchorPositions),s=t.barcode.data!=null&&((u=o.foundTrackedBarcodesInLastProcessedFrame[`${t.identifier}`])==null?void 0:u.barcode.data)===t.barcode.data,i=s?(m=e==null?void 0:e[(p=t.barcode.data)!=null?p:""])==null?void 0:m.searchOptions.brush:void 0,a=i?a$9.createWithBrush(i,this.barcodeFindViewSettings.notInListItemColor):a$9.createWithColors(this.barcodeFindViewSettings.inListItemColor,this.barcodeFindViewSettings.notInListItemColor);return a.style.setProperty("position","absolute"),a.style.setProperty("transform",this.pointTransformation(n.center)),a.dataset.identifier=`${t.identifier}`,s&&(a.setAttribute("variant","target"),a.pulse=true),a}renderDots(t,o){var e,n;for(let s of t.removedTrackedBarcodes){let i=this.layout.querySelector(`[data-identifier="${s}"]`);i==null||i.remove();}if(t.addedTrackedBarcodes.length>0){let s=document.createDocumentFragment();for(let i of t.addedTrackedBarcodes)s.append(this.createDotForTrackedBarcode(i,t,o));this.layout.append(s);}for(let s of t.updatedTrackedBarcodes){let i=this.layout.querySelector(`[data-identifier="${s.identifier}"]`),{center:a}=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(s.anchorPositions);if(i){let u=(n=(e=this.camera)==null?void 0:e.getMirrorImageEnabled())!=null?n:false,p=new Size(this.dataCaptureView.width,this.dataCaptureView.height);i.style.setProperty("position","absolute");let m=u?Point.mirrorX(a,p):a;i.style.setProperty("transform",this.pointTransformation(m));}}}};h.tag="scandit-barcode-find-view";var M=h;export{M as a};