UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

7 lines 11.3 kB
import {b as b$1}from'./chunk-MAA4EROF.js';import {a as a$6}from'./chunk-5CKMOWBK.js';import {a}from'./chunk-WRTJHOS5.js';import {b}from'./chunk-YJ42KEYE.js';import {a as a$8}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$2}from'./chunk-6BIERYLN.js';import {a as a$4}from'./chunk-EPHWAGUD.js';import {a as a$5}from'./chunk-POONUNDO.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-DHCNYKSL.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 d={FinishButton:a$2.tag,ShutterButton:ShutterButton.tag,ProgressBarWithLabel:a.tag,CardListContainer:b$1.tag,TorchIconButton:a$1.tag},c=class c 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(c.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.addMode(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 c.createWithSettings(t,o,i,b$3.BarcodeFind.BarcodeFindViewSettings.settings,a$4.recommendedCameraSettings)}static register(){defineCustomElements({[c.tag]:c});}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(d.CardListContainer,t);}setShouldShowPauseButton(t){this.shouldShowPauseButton=t,this.layout.toggleVisibility(d.ShutterButton,t);}setShouldShowFinishButton(t){this.shouldShowFinishButton=t,this.layout.toggleVisibility(d.FinishButton,t);}setShouldShowProgressBar(t){this.shouldShowProgressBar=t,this.layout.toggleVisibility(d.ProgressBarWithLabel,t);}setShouldShowTorchControl(t){this.shouldShowTorchControl=this.presenter.isTorchAvailable?t:false,this.layout.toggleVisibility(d.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(d.ShutterButton),this.finishButton=this.layout.querySelector(d.FinishButton),this.progressBar=this.layout.querySelector(d.ProgressBarWithLabel),this.cardList=this.layout.querySelector(d.CardListContainer),this.torchIconButton=this.layout.querySelector(d.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;let i=[];for(let e of t){let l=Card.create();l.id=`${String(e.uid)}`;let n=a$6.create();if(l.append(n),n.title=e.searchOptions.barcodeData,o.some(u=>u.searchOptions.barcodeData===e.searchOptions.barcodeData)){n.title=e.searchOptions.barcodeData;let u=a$7.create();u.slot="right",n.append(u);}i.push(l);}(s=this.cardList)==null||s.renderCards(i),(r=this.cardList)==null||r.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$8.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 l=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(e.anchorPositions),n=a$8.createWithColors(this.barcodeFindViewSettings.inListItemColor,this.barcodeFindViewSettings.notInListItemColor);n.style.setProperty("position","absolute"),n.style.setProperty("transform",this.pointTransformation(l.center)),n.dataset.identifier=`${e.identifier}`,e.barcode.data!=null&&((o=t.foundTrackedBarcodesInLastProcessedFrame[`${e.identifier}`])==null?void 0:o.barcode.data)===e.barcode.data&&(n.setAttribute("variant","target"),n.pulse=true),r.append(n);}this.layout.append(r);}for(let r of t.updatedTrackedBarcodes){let e=this.layout.querySelector(`[data-identifier="${r.identifier}"]`),{center:l}=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(r.anchorPositions);if(e){let n=(s=(i=this.camera)==null?void 0:i.getMirrorImageEnabled())!=null?s:false,u=new Size(this.dataCaptureView.width,this.dataCaptureView.height);e.style.setProperty("position","absolute");let H=n?Point.mirrorX(l,u):l;e.style.setProperty("transform",this.pointTransformation(H));}}}};c.tag="scandit-barcode-find-view";var S=c;S.register();export{S as a};