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

Scandit Data Capture SDK for the Web

import { a } from './chunk-OXLBBRZT.js';
import { ScanditHTMLElement, html, defineCustomElements, css, waitTransitionEndForElement } from '@scandit/web-datacapture-core/build/js/private/utils/index.js';

var l="--position",w=(a=>(a.Collapsed="collapsed",a.WillCollapse="willcollapse",a.Expanded="expanded",a.WillExpand="willexpand",a.Tap="cardtap",a))(w||{}),y="cubic-bezier(0.4, 0, 0.2, 1)",s=class s extends ScanditHTMLElement{constructor(){super();this.onCardClickHandler=this.onCardClick.bind(this);this.updateFadeMaskHandler=this.updateFadeMask.bind(this);let t=this.attachShadow({mode:"open"});t.prepend(s.createStyleElement().cloneNode(!0));let e=document.createElement("div");if(e.role="list",e.id="root",e.innerHTML=html`<slot></slot>`,t.append(e),!CSS.supports("mask-image","linear-gradient(black, white)")){let o=document.createElement("div");o.innerHTML='<div class="fade top"></div><div class="fade bottom"></div>',o.classList.add("fade-layer"),t.prepend(o);}}set collapsed(t){if(!t){this.removeAttribute("collapsed");return}this.setAttribute("collapsed",t.toString());}get collapsed(){return !!this.getAttribute("collapsed")}get items(){return this.querySelectorAll(a.tag)}get root(){var t;return (t=this.shadowRoot)==null?void 0:t.querySelector("#root")}static create(){return document.createElement(s.tag)}static register(){defineCustomElements({[s.tag]:s});}static createStyleElement(){return css`:host{--top-offset:0rem;--list-height:600px;--animation-function:${y};--max-expanded-height:calc(var(--list-height) - var(--top-offset));--max-collapsed-height:115px;-webkit-tap-highlight-color:transparent;position:relative;width:100%}:host #root{cursor:pointer;display:block;height:calc(var(--max-expanded-height));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--end-top-mask,0),#000 var(--start-bottom-mask,95%),transparent 100%);overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;transform-style:preserve-3d;transition:height .6s var(--animation-function);-webkit-overflow-scrolling:touch;-ms-overflow-style:none}:host .fade-layer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}:host([collapsed]) .fade-layer div.fade{opacity:0!important}:host .fade-layer div.fade{height:64px;opacity:0;position:absolute;width:100%;z-index:1}:host .fade-layer div.fade.top{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);top:0}:host .fade-layer div.fade.bottom{background:linear-gradient(0deg,rgba(0,0,0,.45),transparent);bottom:0}:host #root::-webkit-scrollbar{display:none}:host([collapsed]) #root{height:var(--max-collapsed-height);mask:none;overflow:hidden}::slotted(${a.tag}){--position:0;--animation-duration:0.5s;--margin-bottom:calc(0.5rem*var(--position));--translate-y-value:calc(var(--position)*100% + var(--margin-bottom));--scale:1;opacity:1;position:absolute;transform:translateY(var(--translate-y-value)) scale(var(--scale));transition:transform var(--animation-duration) var(--animation-function),opacity var(--animation-duration) var(--animation-function);width:100%;will-change:transform,opacity;z-index:calc(var(--position)*-1)}:host([collapsed]) ::slotted(${a.tag}){--translate-y-value:calc(var(--position)*10%);--scale:calc(1 - var(--position)*0.05);opacity:1}:host([collapsed]) ::slotted(${a.tag}:nth-child(3)){opacity:.5}:host([collapsed]) ::slotted(${a.tag}:nth-child(n+4)){opacity:0}`}connectedCallback(){var t;this.addEventListener("click",this.onCardClickHandler),(t=this.root)==null||t.addEventListener("scroll",this.updateFadeMaskHandler),this.updateFadeMaskHandler();}disconnectedCallback(){var t;this.removeEventListener("click",this.onCardClickHandler),(t=this.root)==null||t.removeEventListener("scroll",this.updateFadeMaskHandler);}attributeChangedCallback(t,e,o){t==="collapsed"&&(this.hasAttribute("collapsed")?this.collapse():this.expand());}renderCards(t){let e=document.createDocumentFragment();for(let[o,a]of Object.entries(t))a.dataset.position=`${o}`,a.style.setProperty(l,o.toString()),e.append(a);this.append(e);}clearCards(){for(let t of this.querySelectorAll(a.tag))t.remove();}async unshift(t){if(t.dataset.position==="0"&&t.style.getPropertyValue(l)==="0")return;let e=new Animation(new KeyframeEffect(t,[{transform:"translateY(-100%)",scale:1.05,opacity:0},{transform:"translateY(0%)",scale:1,opacity:1}],{duration:500,easing:y}));t.remove(),t.dataset.position="0",t.style.setProperty(l,"0");let o="0";for(let[a,r]of Object.entries(this.items))o=`${Number(a)+1}`,r.dataset.position=o,r.style.setProperty(l,o);this.prepend(t),e.play(),await e.finished;}onCardClick(t){this.dispatchEvent(new CustomEvent("cardtap",{detail:{card:t.target}}));}updateFadeMask(t){var h,m,v,u,f;let{scrollTop:e=0,scrollHeight:o=0,clientHeight:a=0}=(h=t==null?void 0:t.target)!=null?h:this.root,r=o-a,i=Math.round(e/r*100);if(Number.isNaN(i))return;(m=this.root)==null||m.style.setProperty("--end-top-mask",`${Math.min(i,5)}%`),(v=this.root)==null||v.style.setProperty("--start-bottom-mask",`${Math.max(i,95)}%`);let c=(u=this.shadowRoot)==null?void 0:u.querySelector(".fade.top"),p=(f=this.shadowRoot)==null?void 0:f.querySelector(".fade.bottom");c!=null&&p!=null&&(c.style.setProperty("opacity",`${i/100}`),p.style.setProperty("opacity",`${1-i/100}`));}async toggle(t){var a;let e=[];t==="collapsed"&&((a=this.root)==null||a.scrollTo({behavior:"instant",top:0}));let o={collapsed:"willcollapse",expanded:"willexpand"}[t];this.dispatchEvent(new CustomEvent(o));for(let[r,i]of Object.entries(this.items))Number(r)!==0&&e.push(waitTransitionEndForElement(i)),t==="expanded"&&i.style.removeProperty("opacity"),i.style.setProperty(l,r);await Promise.all(e),this.dispatchEvent(new CustomEvent(t)),this.updateFadeMaskHandler();}async expand(){await this.toggle("expanded");}async collapse(){await this.toggle("collapsed");}};s.tag="scandit-find-card-list",s.observedAttributes=["collapsed"];var d=s;d.register();

export { w as a, d as b };