UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 1.64 kB
import {html,ScanditHTMLElement,defineCustomElements,css}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var c=html`<div id="container"><div class="left"><slot name="image-left"></slot></div><div class="middle"><div class="title overflow-text-mask"></div><div class="subtitle overflow-text-mask"></div></div><div class="right"><slot name="right"></slot></div></div>`,t=class t extends ScanditHTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=c,e.append(t.createStyleElement().cloneNode(true));}set title(e){var a;let i=(a=this.shadowRoot)==null?void 0:a.querySelector(".title");i!=null&&(i.textContent=e);}set subtitle(e){var a;let i=(a=this.shadowRoot)==null?void 0:a.querySelector(".subtitle");i!=null&&(i.textContent=e);}static create(){return document.createElement(t.tag)}static register(){defineCustomElements({[t.tag]:t});}static createStyleElement(){return css`#container{align-items:center;display:flex;flex-direction:row;gap:.625rem;justify-content:center;padding:1rem}.overflow-text-mask{-webkit-mask-image:linear-gradient(90deg,#000 95%,#0000);mask-image:linear-gradient(90deg,#000 95%,#0000);overflow-x:auto;padding-right:.3rem}#container>div{display:flex;flex:1 1 17.5%;justify-content:center}#container>div.middle{flex:1 1 65%;flex-direction:column;overflow:hidden}#container>div ::slotted([slot=image-left]){height:50px;object-fit:cover;width:50px}#container .title{color:#121619;font-size:.938rem;font-weight:600}#container .subtitle{font-size:.75rem;font-weight:400;margin-top:.25rem}`}};t.tag="scandit-image-and-text-card-layout";var n=t;n.register();export{n as a};