@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
117 lines (111 loc) • 8.02 kB
JavaScript
import {b as b$1,a as a$2}from'./chunk-3A6GSH7S.js';import {h,i}from'./chunk-DVHTYKDX.js';import {a}from'./chunk-DOA2Q3CZ.js';import {d,c,k as k$1,l,m as m$1,e,b}from'./chunk-4JEIREAU.js';import {a as a$1,c as c$1}from'./chunk-YBD5JYCX.js';import {ScanditHTMLElement,defineCustomElements,html}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var m=class m 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$1](){return this.hasAttribute(k$1)}set[k$1](t){this.toggleAttribute(k$1,t);}get[l](){return this.hasAttribute(l)}set[l](t){this.toggleAttribute(l,t);}get[m$1](){return this.hasAttribute(m$1)}set[m$1](t){this.toggleAttribute(m$1,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$1].filter(t=>this[t]===true).length}get visibleModeButtonCount(){return [k$1,l].filter(t=>this[t]===true).length}get allVisibleButtonsCount(){return this.visibleButtonCount+this.visibleModeButtonCount}static create(){return defineCustomElements({[c$1]:m,[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 c$2,p,v,S,T,w,y,C;let t=this[e]?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i),b$1=this[b]==="continuous"?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i);this.innerHTML=html`
<div class="container">
<div class="${c$1}">
${this[k$1]?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>`:html``}
${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>`:html``}
${this.visibleButtonCount>0&&this.visibleModeButtonCount>0?html`<div
class="${c$1}__separator"
></div>`:html``}
${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>
`:""}
${this[m$1]?html`
<button
id="cameraSwitchButton"
class="${c$1}__button"
>
<spark-scan-view-icon
icon="camera"
fill="white"
size="24.08"
></spark-scan-view-icon>
</button>
`:""}
${this[c]?html`
<button
id="scanningBehaviorButton"
class="${c$1}__button"
>
<spark-scan-view-icon
icon="continuous"
fill="${b$1}"
size="24"
></spark-scan-view-icon>
</button>
`:""}
</div>
</div>
<style>
.${c$1} {
position: relative;
display: flex;
justify-content: ${this.visibleModeButtonCount===0&&this.allVisibleButtonsCount<=3?"center":"flex-start"};
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: none;
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"),(c$2=this.targetModeButton)==null||c$2.addEventListener("pointerup",this.targetModeButtonTapListener),this.targetModeButtonIcon=(p=this.targetModeButton)==null?void 0:p.querySelector(a$1),this.scanningBehaviorButton=this.querySelector("#scanningBehaviorButton"),(v=this.scanningBehaviorButton)==null||v.addEventListener("pointerup",this.scanningBehaviorButtonTapListener),this.scanningBehaviorButtonIcon=(S=this.scanningBehaviorButton)==null?void 0:S.querySelector(a$1),this.barcodeFindButton=this.querySelector("#barcodeFindButton"),(T=this.barcodeFindButton)==null||T.addEventListener("pointerup",this.barcodeFindButtonTapListener),this.labelCaptureButton=this.querySelector("#labelCaptureButton"),(w=this.labelCaptureButton)==null||w.addEventListener("pointerup",this.labelCaptureButtonTapListener),this.cameraSwitchButton=this.querySelector("#cameraSwitchButton"),(y=this.cameraSwitchButton)==null||y.addEventListener("pointerup",this.cameraSwitchButtonTapListener),this.cameraSwitchButtonIcon=(C=this.cameraSwitchButton)==null?void 0:C.querySelector(a$1);}connectedCallback(){this[d]=true,this[m$1]=true,this.render();}disconnectedCallback(){var t,b,c,p,v;(t=this.targetModeButton)==null||t.removeEventListener("pointerup",this.targetModeButtonTapListener),(b=this.scanningBehaviorButton)==null||b.removeEventListener("pointerup",this.scanningBehaviorButtonTapListener),(c=this.barcodeFindButton)==null||c.removeEventListener("pointerup",this.barcodeFindButtonTapListener),(p=this.labelCaptureButton)==null||p.removeEventListener("pointerup",this.labelCaptureButtonTapListener),(v=this.cameraSwitchButton)==null||v.removeEventListener("pointerup",this.cameraSwitchButtonTapListener);}attributeChangedCallback(t,b,c){if(c!==b){this.render();let p=this.hidden;this.hidden=this.visibleModeButtonCount+this.allVisibleButtonsCount===0,this.hidden!==p&&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"}}));}};m.observedAttributes=[d,c,k$1,l,m$1];var k=m;export{k as a};