@scandit/web-datacapture-barcode/build/js/spark/ui/SparkScanViewToolbar.js

Scandit Data Capture SDK for the Web

import"../SparkScanScanningBehavior.js";import{toolbarIconActiveTintColorCssVariable as e,toolbarIconInactiveTintColorCssVariable as t}from"./constants/cssVariables.js";import{toolbarButtonTapEvent as n,toolbarVisibilityChangeEvent as r}from"./constants/events.js";import{barcodeFindButtonVisibleAttribute as i,cameraSwitchButtonVisibleAttribute as a,labelCaptureButtonVisibleAttribute as o,scanningBehaviorAttribute as s,scanningBehaviorButtonVisibleAttribute as c,selectionModeAutoAttribute as l,targetModeButtonVisibleAttribute as u,targetModeEnabledAttribute as d}from"./constants/attributes.js";import{sparkScanViewIconTag as f,sparkScanViewToolbarTag as p}from"./constants/tags.js";import{SparkScanViewIcon as m}from"./SparkScanViewIcon.js";import{ScanditHTMLElement as h,css as g,defineCustomElements as _,html as v,renderIf as y}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";var b=class b extends h{constructor(...e){super(...e),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 styleElement(){return this._styleElement??=g`.${p}{align-items:center;box-sizing:border-box;display:flex;gap:12px;height:48px;padding:6.75px 12px;position:relative;width:100%}${p} .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}.${p}::-webkit-scrollbar{display:none}.${p}__button{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.${p}__separator{background:var(${t});flex-shrink:0;height:32px;width:1px}.${p}__button--mode{background:#f1f5f8;border-radius:50%}`,this._styleElement}get[u](){return this.hasAttribute(u)}set[u](e){this.toggleAttribute(u,e)}get[l](){return this.hasAttribute(l)}set[l](e){this.toggleAttribute(l,e)}get[c](){return this.hasAttribute(c)}set[c](e){this.toggleAttribute(c,e)}get[i](){return this.hasAttribute(i)}set[i](e){this.toggleAttribute(i,e)}get[o](){return this.hasAttribute(o)}set[o](e){this.toggleAttribute(o,e)}get[a](){return this.hasAttribute(a)}set[a](e){this.toggleAttribute(a,e)}get[d](){return this.hasAttribute(d)}set[d](n){this.toggleAttribute(d,n),this.targetModeButtonIcon&&(this.targetModeButtonIcon.fill=n?this.computedStyle.getPropertyValue(e):this.computedStyle.getPropertyValue(t))}get[s](){return this.getAttribute(`scanning-behavior`)??`single`}set[s](n){this.setAttribute(s,n),this.scanningBehaviorButtonIcon&&(this.scanningBehaviorButtonIcon.fill=n===`continuous`?this.computedStyle.getPropertyValue(e):this.computedStyle.getPropertyValue(t))}get effectiveTargetModeButtonVisible(){return this[`target-mode-button-visible`]&&!this[`selection-mode-auto`]}get visibleButtonCount(){let e=0;return this[`scanning-behavior-button-visible`]&&(e+=1),this.effectiveTargetModeButtonVisible&&(e+=1),this[`camera-switch-button-visible-attribute`]&&(e+=1),e}get visibleModeButtonCount(){return[i,o].filter(e=>this[e]===!0).length}get allVisibleButtonsCount(){return this.visibleButtonCount+this.visibleModeButtonCount}static create(){return _({[p]:b,[f]:m}),document.createElement(p)}enableCameraSwitchButton(n){this.cameraSwitchButtonIcon&&(this.cameraSwitchButtonIcon.fill=n?this.computedStyle.getPropertyValue(e):this.computedStyle.getPropertyValue(t))}render(){var n,r,s,l,u,d,m,h;let g=this[`target-mode-enabled`]?this.computedStyle.getPropertyValue(e):this.computedStyle.getPropertyValue(t),_=this[`scanning-behavior`]===`continuous`?this.computedStyle.getPropertyValue(e):this.computedStyle.getPropertyValue(t),b=y(this[i],v`<button id="barcodeFindButton" class="${p}__button ${p}__button--mode"><spark-scan-view-icon icon="find" fill="#3D4852" size="21.6"></spark-scan-view-icon></button>`),x=y(this[o],v`<button id="labelCaptureButton" class="${p}__button ${p}__button--mode"><spark-scan-view-icon icon="label" fill="#3D4852" size="21.6"></spark-scan-view-icon></button>`),S=y(this.visibleButtonCount>0&&this.visibleModeButtonCount>0,v`<div class="${p}__separator"></div>`),C=y(this.effectiveTargetModeButtonVisible,v`<button id="targetModeButton" class="${p}__button"><spark-scan-view-icon icon="aimer" fill="${g}" size="18"></spark-scan-view-icon></button>`),w=y(this[a],v`<button id="cameraSwitchButton" class="${p}__button"><spark-scan-view-icon icon="camera" fill="white" size="24.08"></spark-scan-view-icon></button>`),T=y(this[c],v`<button id="scanningBehaviorButton" class="${p}__button"><spark-scan-view-icon icon="continuous" fill="${_}" size="24"></spark-scan-view-icon></button>`),E=this.allVisibleButtonsCount<=3?`center`:`flex-start`;this.innerHTML=v`<div class="container"><div class="${p}">${b} ${x} ${S} ${C} ${w} ${T}</div></div>`;let D=this.querySelector(`.${p}`);D&&(D.style.justifyContent=E),this.targetModeButton=this.querySelector(`#targetModeButton`),(n=this.targetModeButton)==null||n.addEventListener(`pointerup`,this.targetModeButtonTapListener),this.targetModeButtonIcon=(r=this.targetModeButton)==null?void 0:r.querySelector(f),this.scanningBehaviorButton=this.querySelector(`#scanningBehaviorButton`),(s=this.scanningBehaviorButton)==null||s.addEventListener(`pointerup`,this.scanningBehaviorButtonTapListener),this.scanningBehaviorButtonIcon=(l=this.scanningBehaviorButton)==null?void 0:l.querySelector(f),this.barcodeFindButton=this.querySelector(`#barcodeFindButton`),(u=this.barcodeFindButton)==null||u.addEventListener(`pointerup`,this.barcodeFindButtonTapListener),this.labelCaptureButton=this.querySelector(`#labelCaptureButton`),(d=this.labelCaptureButton)==null||d.addEventListener(`pointerup`,this.labelCaptureButtonTapListener),this.cameraSwitchButton=this.querySelector(`#cameraSwitchButton`),(m=this.cameraSwitchButton)==null||m.addEventListener(`pointerup`,this.cameraSwitchButtonTapListener),this.cameraSwitchButtonIcon=(h=this.cameraSwitchButton)==null?void 0:h.querySelector(f)}connectedCallback(){this[u]=!0,this[a]=!0,this.render(),this.append(this.styleElement)}disconnectedCallback(){var e,t,n,r,i;(e=this.targetModeButton)==null||e.removeEventListener(`pointerup`,this.targetModeButtonTapListener),(t=this.scanningBehaviorButton)==null||t.removeEventListener(`pointerup`,this.scanningBehaviorButtonTapListener),(n=this.barcodeFindButton)==null||n.removeEventListener(`pointerup`,this.barcodeFindButtonTapListener),(r=this.labelCaptureButton)==null||r.removeEventListener(`pointerup`,this.labelCaptureButtonTapListener),(i=this.cameraSwitchButton)==null||i.removeEventListener(`pointerup`,this.cameraSwitchButtonTapListener)}attributeChangedCallback(e,t,n){if(n!==t){this.render(),this.append(this.styleElement);let e=this.hidden;this.hidden=this.visibleModeButtonCount+this.allVisibleButtonsCount===0,this.hidden!==e&&this.dispatchEvent(new CustomEvent(r))}}onTargetModeButtonTap(e){e.stopPropagation(),this[d]=!this[d],this.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:{tapped:`targetModeButton`,enabled:this[d]}}))}onScanningBehaviorButtonTap(e){e.stopPropagation(),this[s]=this[`scanning-behavior`]===`continuous`?`single`:`continuous`,this.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:{tapped:`scanningBehaviorButton`,enabled:this[s]===`continuous`}}))}onBarcodeFindButtonTap(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:{tapped:`barcodeFindButton`}}))}onLabelCaptureButtonTap(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:{tapped:`labelCaptureButton`}}))}onCameraSwitchButtonTap(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:{tapped:`cameraSwitchButton`}}))}};b.observedAttributes=[u,l,c,i,o,a];export{b as SparkScanViewToolbar};