@scandit/web-datacapture-barcode/build/js/find/ui/molecules/CardListContainer.js

Scandit Data Capture SDK for the Web

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