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

Scandit Data Capture SDK for the Web

import { Orientation } from '@scandit/web-datacapture-core';
import { GestureRecognizer } from '@scandit/web-datacapture-core/build/js/private/GestureRecognizer/GestureRecognizer.js';
import { OrientationObserver, orientationChangeEvent } from '@scandit/web-datacapture-core/build/js/private/OrientationObserver.js';
import { ScanditHTMLElement, debounce, html, defineCustomElements, css } from '@scandit/web-datacapture-core/build/js/private/utils/index.js';

var L=(r=>(r.onTap="onlayouttap",r))(L||{}),n=class n extends ScanditHTMLElement{constructor(){super();this.orientationObserver=new OrientationObserver;this.onOrientationChangeHandler=debounce(this.onOrientationChange.bind(this),50);let t=this.attachShadow({mode:"open"});t.append(n.createStyleElement().cloneNode(!0));let e=document.createElement("div");e.id="root",this.absoluteContainer=document.createElement("div"),this.absoluteContainer.classList.add("absolute-container"),this.absoluteContainer.innerHTML="<slot></slot>",t.insertBefore(this.absoluteContainer,e.nextElementSibling),e.innerHTML=html`
      <div class="wrapper">
        <div class="header">
          <slot name="progress"></slot>
          <slot name="notification-list"></slot>
          <div class="controls top">
            <div class="control left">
              <slot name="top-controls-left"></slot>
            </div>
            <div class="control center">
              <slot name="top-controls-center"></slot>
            </div>
            <div class="control right">
              <slot name="top-controls-right"></slot>
            </div>
          </div>
        </div>
        <div class="main">
          <slot name="card-list"></slot>
        </div>
      </div>
      <div class="controls">
        <div class="control left">
          <slot name="bottom-controls-left"></slot>
        </div>
        <div class="control center">
          <slot name="bottom-controls-center"></slot>
        </div>
        <div class="control right">
          <slot name="bottom-controls-right"></slot>
        </div>
      </div>
    `,t.append(e),this.gestureRecognizer=new GestureRecognizer(this.absoluteContainer);}get cardListContainer(){return this.querySelector('[slot="card-list"]')}get main(){var t;return (t=this.shadowRoot)==null?void 0:t.querySelector(".main")}static create(){return document.createElement(n.tag)}static register(){defineCustomElements({[n.tag]:n});}static createStyleElement(){return css`:host{inset:0;overflow:hidden;position:absolute;z-index:1}:host #root{--padding:1rem;box-sizing:border-box;display:flex;flex-direction:column;gap:.5rem;height:100%;justify-content:space-between;margin:0 auto;max-width:960px;padding:calc(var(--padding))}:host .absolute-container{height:100%;overflow:hidden;position:absolute;width:100%}.main{overflow:hidden}.main,.wrapper{display:flex;flex-direction:column;height:100%}.wrapper{gap:.5rem;justify-content:space-between}.controls{align-items:center;display:flex;flex-direction:row;justify-content:space-evenly;min-height:85px;z-index:1}@media (orientation:landscape){.controls{flex-direction:column}.wrapper{flex:0 70%;margin:0 auto}:host #root{flex-direction:row}}.controls .control{align-items:center;display:flex;flex:1 1 25%;flex-direction:row;justify-content:center}.controls .control.center{flex:1 1 50%;max-width:5rem}.controls.top{min-height:auto}.controls.top .control.left{justify-content:flex-start}.controls.top .control.right{justify-content:flex-end}.header{display:flex;flex-direction:column;gap:1.5rem;position:relative}::slotted([slot=notification-list]){position:absolute;top:calc(var(--padding)*2);width:100%;z-index:1}`}connectedCallback(){this.orientationObserver.addEventListener(orientationChangeEvent,this.onOrientationChangeHandler),this.orientationObserver.register(),this.gestureRecognizer.addListener(this);}disconnectedCallback(){this.orientationObserver.unregister(),this.orientationObserver.removeEventListener(orientationChangeEvent,this.onOrientationChangeHandler),this.gestureRecognizer.removeListener(this);}toggleVisibility(t,e){var o;(o=this.querySelector(t))==null||o.toggleAttribute("hidden",!e);}onTap(t,e){let o=new CustomEvent("onlayouttap",{detail:{point:t,target:e.target}});this.dispatchEvent(o);}onOrientationChange(t){var o,a,s,l,c,d,p,m,u;let e=this.shadowRoot.querySelector(".controls.top");t.detail.value===Orientation.Portrait?(a=(o=this.shadowRoot)==null?void 0:o.querySelector(".header"))==null||a.append(e):(l=(s=this.shadowRoot)==null?void 0:s.querySelector("#root"))==null||l.prepend(e),(c=this.main)==null||c.style.setProperty("height","100%"),(m=this.cardListContainer)==null||m.updateHeight((p=(d=this.main)==null?void 0:d.getBoundingClientRect().height)!=null?p:0),(u=this.main)==null||u.style.setProperty("height","unset");}};n.tag="scandit-find-layout";var i=n;i.register();

export { L as a, i as b };