@scandit/web-datacapture-barcode/build/js/find/ui/organisms/FindLayout.js

Scandit Data Capture SDK for the Web

import{Orientation as e}from"@scandit/web-datacapture-core";import{OrientationObserver as t,orientationChangeEvent as n}from"@scandit/web-datacapture-core/build/js/private/OrientationObserver.js";import{ScanditHTMLElement as r,css as i,debounce as a,defineCustomElements as o,html as s,safeRequestAnimationFrame as c}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";import{GestureRecognizer as l}from"@scandit/web-datacapture-core/build/js/private/GestureRecognizer/GestureRecognizer.js";let u=function(e){return e.onTap=`onlayouttap`,e}({});var d=class u extends r{constructor(){super(),this.orientationObserver=new t,this.onOrientationChangeHandler=a(this.onOrientationChange.bind(this),50);let e=this.attachShadow({mode:`open`});e.append(u.createStyleElement().cloneNode(!0));let n=document.createElement(`div`);n.id=`root`,this.absoluteContainer=document.createElement(`div`),this.absoluteContainer.classList.add(`absolute-container`),this.absoluteContainer.innerHTML=`<slot></slot>`,e.insertBefore(this.absoluteContainer,n.nextElementSibling),n.innerHTML=s`<div class="wrapper"><div class="header"><slot name="progress"></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>`,e.append(n),this.gestureRecognizer=new l(this.absoluteContainer)}get cardListContainer(){return this.querySelector(`[slot="card-list"]`)}get main(){var e;return(e=this.shadowRoot)==null?void 0:e.querySelector(`.main`)}static create(){return document.createElement(u.tag)}static register(){o({[u.tag]:u})}static createStyleElement(){return i`: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}.wrapper{gap:.5rem;height:100%;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([hidden]){display:none}`}connectedCallback(){this.orientationObserver.addEventListener(n,this.onOrientationChangeHandler),this.orientationObserver.register(),this.gestureRecognizer.addListener(this)}disconnectedCallback(){this.orientationObserver.unregister(),this.orientationObserver.removeEventListener(n,this.onOrientationChangeHandler),this.gestureRecognizer.removeListener(this)}toggleVisibility(e,t){var n;(n=this.querySelector(e))==null||n.toggleAttribute(`hidden`,!t)}onTap(e,t){let n=new CustomEvent(`onlayouttap`,{detail:{point:e,target:t.target}});this.dispatchEvent(n)}onOrientationChange(t){let n=this.shadowRoot.querySelector(`.controls.top`);if(t.detail.value===e.Portrait){var r;(r=this.shadowRoot)==null||(r=r.querySelector(`.header`))==null||r.append(n)}else{var i;(i=this.shadowRoot)==null||(i=i.querySelector(`#root`))==null||i.prepend(n)}c(()=>{var e,t,n,r;(e=this.main)==null||e.style.setProperty(`height`,`100%`);let i=((t=this.main)==null?void 0:t.getBoundingClientRect().height)??0;(n=this.cardListContainer)==null||n.updateHeight(i),(r=this.main)==null||r.style.setProperty(`height`,`unset`)})}};d.tag=`scandit-find-layout`,d.register();export{d as FindLayout,u as FindLayoutEvents};