@scandit/web-datacapture-core
Version:
Scandit Data Capture SDK for the Web
1 lines • 6.47 kB
JavaScript
import {a as a$2}from'../../../chunks/chunk-PA2BMEFD.js';import {a as a$5}from'../../../chunks/chunk-2HTI5D6Y.js';import {b}from'../../../chunks/chunk-EQ6V4W5K.js';import {a as a$3}from'../../../chunks/chunk-3A4KLILV.js';import {a as a$1}from'../../../chunks/chunk-UWBNF47P.js';import {a}from'../../../chunks/chunk-EV4OEANA.js';import {a as a$4}from'../../../chunks/chunk-LSZZVJ6B.js';var l="--position",x=(o=>(o.Collapsed="collapsed",o.WillCollapse="willcollapse",o.Expanded="expanded",o.WillExpand="willexpand",o.Tap="cardtap",o))(x||{}),w="cubic-bezier(0.4, 0, 0.2, 1)",r=class r extends a{constructor(){super();this.onCardClickHandler=this.onCardClick.bind(this);this.updateFadeMaskHandler=this.updateFadeMask.bind(this);let t=this.attachShadow({mode:"open"});t.prepend(r.createStyleElement().cloneNode(true));let e=document.createElement("div");if(e.role="list",e.id="root",e.innerHTML=a$1`<slot></slot>`,t.append(e),!CSS.supports("mask-image","linear-gradient(black, white)")){let a=document.createElement("div");a.innerHTML='<div class="fade top"></div><div class="fade bottom"></div>',a.classList.add("fade-layer"),t.prepend(a);}}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$2.tag)}get root(){var t;return (t=this.shadowRoot)==null?void 0:t.querySelector("#root")}static create(){return document.createElement(r.tag)}static register(){a$3({[r.tag]:r});}static createStyleElement(){return a$4`:host{--top-offset:0rem;--list-height:600px;--elements-number:0;--max-expanded-height:min(calc((100px + 0.7rem)*var(--elements-number)),calc(var(--list-height) - var(--top-offset)));--animation-function:${w};--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,#0000 0,#000 var(--end-top-mask,0),#000 var(--start-bottom-mask,95%),#0000 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,#00000073,#0000);top:0}:host .fade-layer div.fade.bottom{background:linear-gradient(0deg,#00000073,#0000);bottom:0}:host #root::-webkit-scrollbar{display:none}:host([collapsed]) #root{height:var(--max-collapsed-height);mask:none;overflow:hidden}::slotted(${a$2.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$2.tag}){--translate-y-value:calc(var(--position)*10%);--scale:calc(1 - var(--position)*0.05);opacity:1}:host([collapsed]) ::slotted(${a$2.tag}:nth-child(3)){opacity:.5}:host([collapsed]) ::slotted(${a$2.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,a){t==="collapsed"&&this._handleStateChange();}async _handleStateChange(){var o;let t=this.collapsed?"willcollapse":"willexpand",e=this.collapsed?"collapsed":"expanded";this.dispatchEvent(new CustomEvent(t)),this.collapsed&&((o=this.root)==null||o.scrollTo({behavior:"instant",top:0}));let a=[];for(let[n,i]of Object.entries(this.items))Number(n)!==0&&a.push(a$5(i,"transform")),this.collapsed||i.style.removeProperty("opacity"),i.style.setProperty(l,n);await Promise.all(a),this.dispatchEvent(new CustomEvent(e)),this.updateFadeMaskHandler();}async expand(){return this.collapsed?(this.collapsed=false,this._handleStateChange()):Promise.resolve()}async collapse(){return this.collapsed?Promise.resolve():(this.collapsed=true,this._handleStateChange())}updateListHeight(t){this.style.setProperty("--elements-number",t.length.toString()),this.updateFadeMaskHandler();}renderCards(t){let e=document.createDocumentFragment();for(let[a,o]of Object.entries(t))o.dataset.position=`${a}`,o.style.setProperty(l,a.toString()),e.append(o);this.append(e),this.updateListHeight(t);}clearCards(){for(let t of this.querySelectorAll(a$2.tag))t.remove();this.updateListHeight([]);}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:w}));t.remove(),t.dataset.position="0",t.style.setProperty(l,"0");let a="0";for(let[o,n]of Object.entries(this.items))a=`${Number(o)+1}`,n.dataset.position=a,n.style.setProperty(l,a);this.prepend(t),e.play(),await b(e);}onCardClick(t){let e=t.target.closest(a$2.tag);e!==null&&this.dispatchEvent(new CustomEvent("cardtap",{bubbles:true,composed:true,detail:{card:e}}));}updateFadeMask(t){var h,m,u,v,f;let{scrollTop:e=0,scrollHeight:a=0,clientHeight:o=0}=(h=t==null?void 0:t.target)!=null?h:this.root,n=a-o,i=Math.round(e/n*100);if(Number.isNaN(i))return;(m=this.root)==null||m.style.setProperty("--end-top-mask",`${Math.min(i,5)}%`),(u=this.root)==null||u.style.setProperty("--start-bottom-mask",`${Math.max(i,95)}%`);let c=(v=this.shadowRoot)==null?void 0:v.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}`));}};r.tag="scandit-card-list",r.observedAttributes=["collapsed"];var d=r;d.register();export{d as CardList,x as CardListEvents};