@scandit/web-datacapture-barcode/build/js/chunks/chunk-ZEFZKKYO.js

Scandit Data Capture SDK for the Web

import { b as b$1, a as a$2 } from './chunk-3A6GSH7S.js';
import { h, i, g as g$1 } from './chunk-DVHTYKDX.js';
import { a as a$1 } from './chunk-DTO5ICFV.js';
import { d, c, k, l, e, b } from './chunk-Y6DC25EF.js';
import { c as c$1, a } from './chunk-YBD5JYCX.js';
import { ScanditHTMLElement, defineCustomElements, html } from '@scandit/web-datacapture-core/build/js/private/utils/index.js';

var g=class g extends ScanditHTMLElement{constructor(){super(...arguments);this.targetModeButtonTapListener=this.onTargetModeButtonTap.bind(this);this.scanningBehaviorButtonTapListener=this.onScanningBehaviorButtonTap.bind(this);this.barcodeFindButtonTapListener=this.onBarcodeFindButtonTap.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[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 visibleModeButtonCount(){return [k].reduce((n,i)=>this[i]===!0?n+1:n,0)}get visibleButtonCount(){return g.observedAttributes.reduce((t,n)=>this[n]===!0?t+1:t,0)}static create(){return defineCustomElements({[c$1]:this,[a]:a$1}),document.createElement(c$1)}enableCameraSwitchButton(t){this.cameraSwitchButtonIcon&&(this.cameraSwitchButtonIcon.fill=t?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i));}render(){var i$1,B,m,S,w,T,y;let t=this[e]?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i),n=this[b]==="continuous"?this.computedStyle.getPropertyValue(h):this.computedStyle.getPropertyValue(i);this.innerHTML=html`
      <div class="${c$1}">
        ${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>`:html``}
        ${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[l]?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="${n}"
                  size="24"
                ></spark-scan-view-icon>
              </button>
            `:""}
      </div>

      <style>
        .${c$1} {
          position: relative;
          display: flex;
          justify-content: ${this.visibleModeButtonCount===0&&this.visibleButtonCount<=3?"center":"flex-start"};
          align-items: center;
          box-sizing: border-box;
          width: 100%;
          height: 48px;
          padding: 6.75px 12px;
          background: var(${g$1});
          gap: 12px;
          overflow-x: scroll;
          -ms-overflow-style: none;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
          border-bottom-left-radius: 16px;
          border-bottom-right-radius: 16px;
        }

        .${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%;
        }

        .${c$1}::before {
          content: "";
          position: absolute;
          bottom: 100%;
          left: 0;
          width: 16px;
          height: 16px;
          background: var(${g$1});
          clip-path: path("M 0,0 L 0,16 L 16,16 C 16,16 0,16 0,-2 Z");
        }

        .${c$1}::after {
          content: "";
          position: absolute;
          bottom: 100%;
          right: 0;
          width: 16px;
          height: 16px;
          background: var(${g$1});
          clip-path: path("M 16,0 L 16,16 L 0,16 C 0,16 16,16 16,-2 Z");
        }
      </style>
    `,this.targetModeButton=this.querySelector("#targetModeButton"),(i$1=this.targetModeButton)==null||i$1.addEventListener("pointerup",this.targetModeButtonTapListener),this.targetModeButtonIcon=(B=this.targetModeButton)==null?void 0:B.querySelector(a),this.scanningBehaviorButton=this.querySelector("#scanningBehaviorButton"),(m=this.scanningBehaviorButton)==null||m.addEventListener("pointerup",this.scanningBehaviorButtonTapListener),this.scanningBehaviorButtonIcon=(S=this.scanningBehaviorButton)==null?void 0:S.querySelector(a),this.barcodeFindButton=this.querySelector("#barcodeFindButton"),(w=this.barcodeFindButton)==null||w.addEventListener("pointerup",this.barcodeFindButtonTapListener),this.cameraSwitchButton=this.querySelector("#cameraSwitchButton"),(T=this.cameraSwitchButton)==null||T.addEventListener("pointerup",this.cameraSwitchButtonTapListener),this.cameraSwitchButtonIcon=(y=this.cameraSwitchButton)==null?void 0:y.querySelector(a);}connectedCallback(){this[d]=!0,this[l]=!0,this.render();}disconnectedCallback(){var t,n,i;(t=this.targetModeButton)==null||t.removeEventListener("pointerup",this.targetModeButtonTapListener),(n=this.scanningBehaviorButton)==null||n.removeEventListener("pointerup",this.scanningBehaviorButtonTapListener),(i=this.cameraSwitchButton)==null||i.removeEventListener("pointerup",this.cameraSwitchButtonTapListener);}attributeChangedCallback(t,n,i){if(i!==n){this.render();let B=this.hidden;this.hidden=this.visibleModeButtonCount+this.visibleButtonCount===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:!0,detail:{tapped:"targetModeButton",enabled:this[e]}}));}onScanningBehaviorButtonTap(t){t.stopPropagation(),this[b]=this[b]==="continuous"?"single":"continuous",this.dispatchEvent(new CustomEvent(a$2,{bubbles:!0,detail:{tapped:"scanningBehaviorButton",enabled:this[b]==="continuous"}}));}onBarcodeFindButtonTap(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(a$2,{bubbles:!0,detail:{tapped:"barcodeFindButton"}}));}onCameraSwitchButtonTap(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(a$2,{bubbles:!0,detail:{tapped:"cameraSwitchButton"}}));}};g.observedAttributes=[d,c,k,l];var E=g;

export { E as a };