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

Scandit Data Capture SDK for the Web

import {a as a$2}from'./chunk-XSJEGOGN.js';import {a as a$1}from'./chunk-YQNNEW67.js';import {a as a$6,b as b$3}from'./chunk-YZHF42BC.js';import {b}from'./chunk-5DP5VNWQ.js';import {a as a$5,b as b$2}from'./chunk-OPL5NVVM.js';import {g as g$2}from'./chunk-3A6GSH7S.js';import {g as g$1}from'./chunk-DVHTYKDX.js';import {a as a$3}from'./chunk-DOA2Q3CZ.js';import {j,i,f,a,g,n}from'./chunk-4JEIREAU.js';import {c,e,a as a$4,b as b$1}from'./chunk-YBD5JYCX.js';import {Point}from'@scandit/web-datacapture-core';import {ScanditHTMLElement,defineCustomElements,safeAwaitAnimation,safeCancelAnimation,html,Timeout}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var F=(i=>(i.ResizeButton="resizeButton",i.ZoomButton="zoomButton",i.TorchButton="torchButton",i.CloseButton="closeButton",i))(F||{}),q=1200,w=class w extends ScanditHTMLElement{constructor(){super(...arguments);this.resizeButtonTapListener=this.onResizeButtonTap.bind(this);this.zoomButtonTapListener=this.onZoomButtonTap.bind(this);this.torchButtonTapListener=this.onTorchButtonTap.bind(this);this.closeButtonTapListener=this.onCloseButtonTap.bind(this);this.pointerDownListener=this.onPointerDown.bind(this);this.longPressStartListener=this.onLongPressStart.bind(this);this.toolbarVisibilityChangeListener=this.onToolbarVisibilityChange.bind(this);this.longPressEndListener=this.onLongPressEnd.bind(this);this.dragEndListener=this.onDragEnd.bind(this);this.fadeOutAnimation=new Animation(new KeyframeEffect(this,[{opacity:1},{opacity:0}],{duration:500,fill:"both"}));this.replayFadeOutTimeout=null;this.longPressController=new b(this);}get visible(){return this.hasAttribute("visible")}set visible(t){this.toggleAttribute("visible",t);}get size(){return this.expanded?"expanded":"regular"}set size(t){var i;this.toggleAttribute("expanded",t==="expanded");let o=this.getNextTranslate();(i=this.dragController)==null||i.translateTo(o,false).then(async()=>{var n;return (n=this.dragController)==null?void 0:n.repositionIfOutOfBounds()});}get expanded(){return this.hasAttribute("expanded")}get[a](){var t;return Number((t=this.getAttribute(a))!=null?t:"1")}set[a](t){this.setAttribute(a,String(t));}get darkened(){return this.hasAttribute("darkened")}set darkened(t){this.toggleAttribute("darkened",t);}get orientation(){var t;return (t=this.getAttribute("orientation"))!=null?t:"portrait-primary"}set orientation(t){this.setAttribute("orientation",t);}get[g](){return this.hasAttribute(g)}set[g](t){this.toggleAttribute(g,t);}get[j](){return this.hasAttribute(j)}set[j](t){this.toggleAttribute(j,t);}get[i](){return this.hasAttribute(i)}set[i](t){this.toggleAttribute(i,t);}get[f](){return this.hasAttribute(f)}set[f](t){this.toggleAttribute(f,t);}get[n](){return this.hasAttribute(n)}set[n](t){this.toggleAttribute(n,t);}get cover(){return this.hasAttribute("cover")}set cover(t){this.toggleAttribute("cover",t);}get pressed(){return this.hasAttribute("pressed")}set pressed(t){this.toggleAttribute("pressed",t);}static create(){return defineCustomElements({[b$1]:w,[a$4]:a$3,[e]:a$2,[c]:a$1}),document.createElement(b$1)}repositionIfOutOfBounds(){var t;(t=this.dragController)==null||t.repositionIfOutOfBounds();}showToast(t,o,i){this.toast.show(t,o,i);}hideToast(){this.toast.hide();}zoomIn(){this.zoomButton&&(this[a]=2,this.zoomButton.textContent="2x",this.showToast("warning","2x zoom",1e3));}zoomOut(){this.zoomButton&&(this[a]=1,this.zoomButton.textContent="1x",this.showToast("info","1x zoom",1e3));}async fadeOut(){this.fadeOutAnimation.play(),await safeAwaitAnimation(this.fadeOutAnimation),this.visible=false;}cancelFadeOut(){var t;(t=this.replayFadeOutTimeout)==null||t.stop(),safeCancelAnimation(this.fadeOutAnimation);}async rewindAnimation(){var t,o;(((t=this.replayFadeOutTimeout)==null?void 0:t.running)===true||this.fadeOutAnimation.playState!=="idle")&&(this.cancelFadeOut(),(o=this.replayFadeOutTimeout)==null||o.start());}translateTo(t){var o;(o=this.dragController)==null||o.translateTo(t,false);}render(){var t,o,i$1,n$1,a$1,l,b;this.innerHTML=html`
      <spark-scan-view-toast></spark-scan-view-toast>
      <div id="host"></div>
      <div id="controls">
        <div id="button-container-list">
          <div class="button-container">
            <button id="torchButton" class="${b$1}__button">
              <spark-scan-view-icon icon="torchOff" fill="white" size="9"></spark-scan-view-icon>
            </button>
            <button id="closeButton" class="${b$1}__button">
              <spark-scan-view-icon icon="close" fill="white" size="9"></spark-scan-view-icon>
            </button>
          </div>
          <div class="button-container">
            <button id="resizeButton" class="${b$1}__button">
              <spark-scan-view-icon icon="expand" fill="white" size="14"></spark-scan-view-icon>
            </button>
            <button id="zoomButton" class="${b$1}__button">
              ${this[a]}x
            </button>
          </div>
        </div>
      </div>
      <spark-scan-view-toolbar></spark-scan-view-toolbar>
      <div id="overlay"></div>

      <style>
        ${b$1} {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          background: var(${g$1});
          border-radius: 16px;
          filter: drop-shadow(0px 2px 6px #${a$5.toJSON()})
            drop-shadow(0px 1px 2px #${b$2.toJSON()});
          transition: filter 0.3s ease;
          z-index: 100;
        }

        ${b$1},
        ${b$1} #overlay {
          width: var(--dvw-half);
          height: var(--dvw-half);
          min-width: 192px;
          min-height: 192px;
          max-width: min(250px, var(--dvw-half));
          max-height: min(250px, var(--dvw-half));
        }

        @media (orientation: landscape) {
          ${b$1},
          ${b$1} #overlay {
            width: var(--dvh-half);
            height: var(--dvh-half);
            max-width: min(250px, var(--dvh-half));
            max-height: min(250px, var(--dvh-half));
          }
        }

        @media screen (min-width: 768px) and (orientation: portrait) {
          ${b$1},
          ${b$1} #overlay {
            max-width: min(375px, var(--dvw-half));
            max-height: min(375px, var(--dvw-half));
          }
        }

        @media screen (min-width: 768px) and (orientation: landscape) {
          ${b$1},
          ${b$1} #overlay {
            max-width: min(375px, var(--dvh-half));
            max-height: min(375px, var(--dvh-half));
          }
        }

        ${b$1}[visible] {
          display: flex;
          flex-flow: column;
        }

        ${b$1}[expanded],
        ${b$1}[expanded] #overlay {
          width: calc(var(--dvw) - ${32}px);
          height: calc(var(--dvh-half) - ${32}px);
          max-width: min(400px, calc(var(--dvw) - ${32}px));
          max-height: min(400px, calc(var(--dvh-half) - ${32}px));
        }

        ${b$1}[pressed] {
          filter: drop-shadow(0px 4px 4px #${b$2.toJSON()})
            drop-shadow(0px 8px 12px #${a$5.toJSON()});
        }

        @media (orientation: landscape) {
          ${b$1}[expanded],
          ${b$1}[expanded] #overlay {
            width: calc(var(--dvh-half) - ${32}px);
            height: calc(var(--dvh) - ${32}px);
            max-width: min(400px, calc(var(--dvh-half) - ${32}px));
            max-height: min(400px, calc(var(--dvh) - ${32}px));
          }
        }

        spark-scan-view-toast {
          position: absolute;
          top: 16px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 20;
        }

        ${b$1} #host,
        ${b$1} #host * {
          width: 100%;
          border-radius: 16px;
        }

        ${b$1} #host {
          height: calc(100% - 48px);
          z-index: -10;
        }

        ${b$1}[cover] #host {
          height: 100%;
        }

        ${b$1} #controls {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-rows: auto max-content;
          box-sizing: border-box;
        }

        ${b$1} #button-container-list {
          width: 100%;
          height: calc(100% - 48px);
          display: flex;
          flex-flow: column;
          justify-content: space-between;
        }

        ${b$1}[cover] #button-container-list {
          height: 100%;
        }

        ${b$1} .button-container {
          padding: 12px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        ${b$1}[${f}] .button-container:first-of-type,
        ${b$1}[${j}] .button-container:nth-of-type(2) {
          justify-content: space-between;
        }

        .${b$1}__button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 24px;
          height: 24px;
          border: none;
          background: rgba(18, 22, 25, 0.5);
          color: white;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          font-weight: 500;
          border-radius: 50%;
        }

        ${b$1} #torchButton,
        ${b$1} #closeButton,
        ${b$1} #resizeButton,
        ${b$1} #zoomButton {
          display: none;
        }

        ${b$1}[${f}] #torchButton,
        ${b$1}[${j}] #resizeButton {
          display: flex;
        }

        ${b$1}[${n}] #closeButton,
        ${b$1}[${i}] #zoomButton {
          display: flex;
          align-self: end;
        }

        ${b$1} #overlay {
          position: absolute;
          z-index: 10;
          top: 0;
          left: 0;
          background: black;
          border-radius: 16px;
          opacity: 0;
          transition: opacity 0.3s ease;
          pointer-events: none;
        }

        ${b$1}[darkened] #overlay {
          opacity: 0.3;
        }
      </style>
    `,this.toast=this.querySelector("spark-scan-view-toast"),this.host=this.querySelector("#host"),this.resizeButton=this.querySelector("#resizeButton"),(t=this.resizeButton)==null||t.addEventListener("pointerup",this.resizeButtonTapListener),this.resizeButtonIcon=(o=this.resizeButton)==null?void 0:o.querySelector("spark-scan-view-icon"),this.zoomButton=this.querySelector("#zoomButton"),(i$1=this.zoomButton)==null||i$1.addEventListener("pointerup",this.zoomButtonTapListener),this.torchButton=this.querySelector("#torchButton"),(n$1=this.torchButton)==null||n$1.addEventListener("pointerup",this.torchButtonTapListener),this.torchButtonIcon=(a$1=this.torchButton)==null?void 0:a$1.querySelector("spark-scan-view-icon"),this.closeButton=this.querySelector("#closeButton"),(l=this.closeButton)==null||l.addEventListener("pointerup",this.closeButtonTapListener),this.toolbar=this.querySelector(c),(b=this.toolbar)==null||b.addEventListener("toolbarvisibilitychange",this.toolbarVisibilityChangeListener),this.buttonContainerList=this.querySelector("#button-container-list");}onResizeButtonTap(t){t.stopPropagation(),this.size={regular:"expanded",expanded:"regular"}[this.size],this.resizeButtonIcon&&(this.resizeButtonIcon.icon=this.expanded?"shrink":"expand"),this.dispatchEvent(new CustomEvent(g$2,{detail:{tapped:"resizeButton",expanded:this.expanded}}));}onZoomButtonTap(t){switch(t.stopPropagation(),this[a]){case 1:{this.zoomIn();break}case 2:{this.zoomOut();break}}this.dispatchEvent(new CustomEvent(g$2,{detail:{tapped:"zoomButton",zoomFactor:this[a]}}));}onTorchButtonTap(t){t.stopPropagation(),this[g]=!this[g],this.torchButtonIcon&&(this.torchButtonIcon.icon=this[g]?"torchOn":"torchOff"),this.dispatchEvent(new CustomEvent(g$2,{detail:{tapped:"torchButton",enabled:this[g]}}));}onCloseButtonTap(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(g$2,{detail:{tapped:"closeButton"}}));}onPointerDown(){this.dragController&&(this.dragController.draggable=false),this.rewindAnimation();}onLongPressStart(){this.dragController&&(this.dragController.draggable=true),this.pressed=true;}onLongPressEnd(){this.pressed=false;}onDragEnd(t){t instanceof a$6&&(this.lastKnownTranslate=t.point);}onToolbarVisibilityChange(){this.cover=!this.toolbar||this.toolbar.hidden;}connectedCallback(){var t,o;this.rootElement=(t=this.parentElement)==null?void 0:t.parentElement,this.dragController=new b$3(this,this.rootElement),this.replayFadeOutTimeout=new Timeout(q,async()=>{await this.fadeOut();}),this.render(),this.addEventListener("pointerdown",this.pointerDownListener),this.addEventListener("longpressstart",this.longPressStartListener),this.addEventListener("longpressend",this.longPressEndListener),this.addEventListener("dragend",this.dragEndListener),this.dragController.connect(),this.longPressController.connect(),this.buttonContainerList&&((o=this.toolbar)!=null&&o.firstElementChild)&&(this.longPressController.elementsAllowedToTriggerLongPressEvents.add(this.buttonContainerList),this.longPressController.elementsAllowedToTriggerLongPressEvents.add(this.toolbar.firstElementChild)),this.dragController.margin=new Point(16,16);}disconnectedCallback(){var t,o,i,n,a,l,b;(t=this.resizeButton)==null||t.removeEventListener("pointerup",this.resizeButtonTapListener),(o=this.zoomButton)==null||o.removeEventListener("pointerup",this.zoomButtonTapListener),(i=this.torchButton)==null||i.removeEventListener("pointerup",this.torchButtonTapListener),(n=this.closeButton)==null||n.removeEventListener("pointerup",this.closeButtonTapListener),(a=this.toolbar)==null||a.removeEventListener("toolbarvisibilitychange",this.toolbarVisibilityChangeListener),this.removeEventListener("pointerdown",this.pointerDownListener),this.removeEventListener("longpressstart",this.longPressStartListener),this.removeEventListener("longpressend",this.longPressEndListener),this.removeEventListener("dragend",this.dragEndListener),safeCancelAnimation(this.fadeOutAnimation),(l=this.replayFadeOutTimeout)==null||l.stop(),(b=this.dragController)==null||b.disconnect(),this.longPressController.disconnect();}getNextTranslate(){var n,a,l;let t=((n=this.rootElement)==null?void 0:n.clientWidth)||document.body.clientWidth,o=((a=this.rootElement)==null?void 0:a.clientHeight)||document.body.clientHeight;if(!this.dragController)return new Point(0,0);if(this.size==="regular")return (l=this.lastKnownTranslate)!=null?l:this.dragController.translate;this.lastKnownTranslate=this.dragController.translate;let i=this.dragController.translate;return (this.orientation==="portrait-primary"||this.orientation==="portrait-secondary")&&this.dragController.translate.x>16&&(i=new Point(16,i.y)),(this.orientation==="landscape-primary"||this.orientation==="landscape-secondary")&&this.dragController.translate.x>t-this.clientWidth-16&&(i=new Point(t-this.clientWidth-16,i.y)),this.dragController.translate.y>o-this.clientHeight-16&&(i=new Point(i.x,o-this.clientHeight-16)),i}};w.observedAttributes=[j,i,f];var P=w;export{F as a,P as b};