UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 7.16 kB
import {b as b$1,a as a$2}from'./chunk-4PYZSS3H.js';import {h,i}from'./chunk-DVHTYKDX.js';import {a}from'./chunk-5Q3AHWJL.js';import {d,c,k,l,m,e,b}from'./chunk-4JEIREAU.js';import {a as a$1,c as c$1}from'./chunk-YBD5JYCX.js';import {ScanditHTMLElement,defineCustomElements,renderIf,html}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var S=class S extends ScanditHTMLElement{constructor(){super(...arguments);this.targetModeButtonTapListener=this.onTargetModeButtonTap.bind(this);this.scanningBehaviorButtonTapListener=this.onScanningBehaviorButtonTap.bind(this);this.barcodeFindButtonTapListener=this.onBarcodeFindButtonTap.bind(this);this.labelCaptureButtonTapListener=this.onLabelCaptureButtonTap.bind(this);this.cameraSwitchButtonTapListener=this.onCameraSwitchButtonTap.bind(this);this.computedStyle=getComputedStyle(this);}get[d](){return this.hasAttribute(d)}set[d](t){this.toggleAttribute(d,t);}get[c](){return this.hasAttribute(c)}set[c](t){this.toggleAttribute(c,t);}get[k](){return this.hasAttribute(k)}set[k](t){this.toggleAttribute(k,t);}get[l](){return this.hasAttribute(l)}set[l](t){this.toggleAttribute(l,t);}get[m](){return this.hasAttribute(m)}set[m](t){this.toggleAttribute(m,t);}get[e](){return this.hasAttribute(e)}set[e](t){this.toggleAttribute(e,t),this.targetModeButtonIcon&&(this.targetModeButtonIcon.fill=t?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i));}get[b](){var t;return (t=this.getAttribute(b))!=null?t:"single"}set[b](t){this.setAttribute(b,t),this.scanningBehaviorButtonIcon&&(this.scanningBehaviorButtonIcon.fill=t==="continuous"?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i));}get visibleButtonCount(){return [c,d,m].filter(t=>this[t]===true).length}get visibleModeButtonCount(){return [k,l].filter(t=>this[t]===true).length}get allVisibleButtonsCount(){return this.visibleButtonCount+this.visibleModeButtonCount}static create(){return defineCustomElements({[c$1]:S,[a$1]:a}),document.createElement(c$1)}enableCameraSwitchButton(t){this.cameraSwitchButtonIcon&&(this.cameraSwitchButtonIcon.fill=t?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i));}render(){var T,w,y,C,E,f,k$1,L;let t=this[e]?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i),p=this[b]==="continuous"?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i),h$1=renderIf(this[k],html`<button id="barcodeFindButton" class="${c$1}__button ${c$1}__button--mode"><spark-scan-view-icon icon="find" fill="#3D4852" size="21.6"></spark-scan-view-icon></button>`),b$1=renderIf(this[l],html`<button id="labelCaptureButton" class="${c$1}__button ${c$1}__button--mode"><spark-scan-view-icon icon="label" fill="#3D4852" size="21.6"></spark-scan-view-icon></button>`),m$1=renderIf(this.visibleButtonCount>0&&this.visibleModeButtonCount>0,html`<div class="${c$1}__separator"></div>`),A=renderIf(this[d],html`<button id="targetModeButton" class="${c$1}__button"><spark-scan-view-icon icon="aimer" fill="${t}" size="18"></spark-scan-view-icon></button>`),I=renderIf(this[m],html`<button id="cameraSwitchButton" class="${c$1}__button"><spark-scan-view-icon icon="camera" fill="white" size="24.08"></spark-scan-view-icon></button>`),_=renderIf(this[c],html`<button id="scanningBehaviorButton" class="${c$1}__button"><spark-scan-view-icon icon="continuous" fill="${p}" size="24"></spark-scan-view-icon></button>`),x=this.allVisibleButtonsCount<=3?"center":"flex-start";this.innerHTML=html`<div class="container"><div class="${c$1}">${h$1} ${b$1} ${m$1} ${A} ${I} ${_}</div></div><style>.${c$1}{position:relative;display:flex;justify-content:${x};align-items:center;box-sizing:border-box;width:100%;height:48px;padding:6.75px 12px;gap:12px}${c$1} .container{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.${c$1}::-webkit-scrollbar{display:none}.${c$1}__button{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:40px;height:40px;border:none;background:0 0;cursor:pointer}.${c$1}__separator{width:1px;height:32px;flex-shrink:0;background:var(${i})}.${c$1}__button--mode{background:#f1f5f8;border-radius:50%}</style>`,this.targetModeButton=this.querySelector("#targetModeButton"),(T=this.targetModeButton)==null||T.addEventListener("pointerup",this.targetModeButtonTapListener),this.targetModeButtonIcon=(w=this.targetModeButton)==null?void 0:w.querySelector(a$1),this.scanningBehaviorButton=this.querySelector("#scanningBehaviorButton"),(y=this.scanningBehaviorButton)==null||y.addEventListener("pointerup",this.scanningBehaviorButtonTapListener),this.scanningBehaviorButtonIcon=(C=this.scanningBehaviorButton)==null?void 0:C.querySelector(a$1),this.barcodeFindButton=this.querySelector("#barcodeFindButton"),(E=this.barcodeFindButton)==null||E.addEventListener("pointerup",this.barcodeFindButtonTapListener),this.labelCaptureButton=this.querySelector("#labelCaptureButton"),(f=this.labelCaptureButton)==null||f.addEventListener("pointerup",this.labelCaptureButtonTapListener),this.cameraSwitchButton=this.querySelector("#cameraSwitchButton"),(k$1=this.cameraSwitchButton)==null||k$1.addEventListener("pointerup",this.cameraSwitchButtonTapListener),this.cameraSwitchButtonIcon=(L=this.cameraSwitchButton)==null?void 0:L.querySelector(a$1);}connectedCallback(){this[d]=true,this[m]=true,this.render();}disconnectedCallback(){var t,p,h,b,m;(t=this.targetModeButton)==null||t.removeEventListener("pointerup",this.targetModeButtonTapListener),(p=this.scanningBehaviorButton)==null||p.removeEventListener("pointerup",this.scanningBehaviorButtonTapListener),(h=this.barcodeFindButton)==null||h.removeEventListener("pointerup",this.barcodeFindButtonTapListener),(b=this.labelCaptureButton)==null||b.removeEventListener("pointerup",this.labelCaptureButtonTapListener),(m=this.cameraSwitchButton)==null||m.removeEventListener("pointerup",this.cameraSwitchButtonTapListener);}attributeChangedCallback(t,p,h){if(h!==p){this.render();let b=this.hidden;this.hidden=this.visibleModeButtonCount+this.allVisibleButtonsCount===0,this.hidden!==b&&this.dispatchEvent(new CustomEvent(b$1));}}onTargetModeButtonTap(t){t.stopPropagation(),this[e]=!this[e],this.dispatchEvent(new CustomEvent(a$2,{bubbles:true,detail:{tapped:"targetModeButton",enabled:this[e]}}));}onScanningBehaviorButtonTap(t){t.stopPropagation(),this[b]=this[b]==="continuous"?"single":"continuous",this.dispatchEvent(new CustomEvent(a$2,{bubbles:true,detail:{tapped:"scanningBehaviorButton",enabled:this[b]==="continuous"}}));}onBarcodeFindButtonTap(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(a$2,{bubbles:true,detail:{tapped:"barcodeFindButton"}}));}onLabelCaptureButtonTap(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(a$2,{bubbles:true,detail:{tapped:"labelCaptureButton"}}));}onCameraSwitchButtonTap(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(a$2,{bubbles:true,detail:{tapped:"cameraSwitchButton"}}));}};S.observedAttributes=[d,c,k,l,m];var $=S;export{$ as a};