UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 1.63 kB
import{ScanditHTMLElement as e,css as t,defineCustomElements as n,html as r}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";const i=r`<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>`;var a=class r extends e{constructor(){super();let e=this.attachShadow({mode:`open`});e.innerHTML=i,e.append(r.createStyleElement().cloneNode(!0))}set title(e){var t;let n=(t=this.shadowRoot)==null?void 0:t.querySelector(`.title`);n!=null&&(n.textContent=e)}set subtitle(e){var t;let n=(t=this.shadowRoot)==null?void 0:t.querySelector(`.subtitle`);n!=null&&(n.textContent=e)}static create(){return document.createElement(r.tag)}static register(){n({[r.tag]:r})}static createStyleElement(){return t`#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}`}};a.tag=`scandit-image-and-text-card-layout`,a.register();export{a as ImageAndTextCardLayout};