UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

5 lines 3.45 kB
import {a}from'./chunk-YWCXI7D5.js';import {ScanditHTMLElement,html,defineCustomElements,css}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';import {Card}from'@scandit/web-datacapture-core/build/js/private/ui/atoms/Card.js';import {CardList,CardListEvents}from'@scandit/web-datacapture-core/build/js/private/ui/atoms/CardList.js';var l="cubic-bezier(0.4, 0, 0.2, 1)",L=(n=>(n.TextForCollapseCardsButton="text-for-collapse-cards-button",n))(L||{}),i=class i extends ScanditHTMLElement{constructor(){super();this.onCarListTapHandler=this.onCarListTap.bind(this);this.onCardListWillExpandHandler=this.onCardListWillExpand.bind(this);this.onCarouselButtonClickHandler=this.onCarouselButtonClick.bind(this);this.textNode=document.createTextNode("");let t=this.attachShadow({mode:"open"});t.append(i.createStyleElement().cloneNode(true));let s=document.createElement("div");s.id="root",s.innerHTML=html` <${a.tag} class="hide"> </${a.tag}> <${CardList.tag} collapsed></${CardList.tag}> `,t.append(s),this.carouselButton.append(this.textNode);}set"text-for-collapse-cards-button"(t){this.textNode.textContent=t;}get"text-for-collapse-cards-button"(){return this.textNode.textContent}get cardsList(){return this.shadowRoot.querySelector(CardList.tag)}get carouselButton(){return this.shadowRoot.querySelector(a.tag)}static create(){return document.createElement(i.tag)}static register(){defineCustomElements({[i.tag]:i,[a.tag]:a,[CardList.tag]:CardList,[Card.tag]:Card});}static createStyleElement(){return css`:host #root{align-items:center;display:flex;flex-direction:column;gap:.5rem;height:100%}:host #root ${a.tag}{opacity:1;transform:translateY(0);transition:opacity ${l} .5s,transform ${l} .5s}:host #root ${a.tag}.hide{opacity:0;transform:translateY(100%)}`}attributeChangeCallback(t,s,c){t==="text-for-collapse-cards-button"&&(this["text-for-collapse-cards-button"]=c);}connectedCallback(){this.textNode.textContent=this.getAttribute("text-for-collapse-cards-button"),this.carouselButton.addEventListener("click",this.onCarouselButtonClickHandler),this.cardsList.addEventListener(CardListEvents.Tap,this.onCarListTapHandler),this.cardsList.addEventListener(CardListEvents.WillExpand,this.onCardListWillExpandHandler);}disconnectedCallback(){this.carouselButton.removeEventListener("click",this.onCarouselButtonClickHandler),this.cardsList.removeEventListener(CardListEvents.Tap,this.onCarListTapHandler),this.cardsList.removeEventListener(CardListEvents.WillExpand,this.onCardListWillExpandHandler);}collapse(){this.carouselButton.classList.add("hide"),this.cardsList.collapsed=true;}expand(){this.carouselButton.classList.remove("hide"),this.cardsList.collapsed=false;}renderCards(t){this.cardsList.clearCards(),this.cardsList.renderCards(t);}async unshiftCard(t){return this.cardsList.unshift(t)}getCardBySelector(t){return this.cardsList.querySelector(t)}updateHeight(t){let s=this.carouselButton.clientHeight;this.cardsList.style.setProperty("--list-height",`${t}px`),this.cardsList.style.setProperty("--top-offset",`calc(${s===0?32:s}px + 5rem)`);}onCardListWillExpand(){this.carouselButton.classList.remove("hide");}onCarListTap(){this.cardsList.collapsed=false;}onCarouselButtonClick(){this.carouselButton.classList.add("hide"),this.cardsList.collapsed=true;}};i.tag="scandit-find-card-list-container",i.observedAttributes=["text-for-collapse-cards-button"];var o=i;o.register();export{L as a,o as b};