@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
35 lines • 2.23 kB
JavaScript
import {Anchor}from'@scandit/web-datacapture-core';import {ScanditHTMLElement,html,defineCustomElements,css}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var o=class o extends ScanditHTMLElement{constructor(){super();let l=this.attachShadow({mode:"open"});l.append(o.createStyleElement().cloneNode(true));let e=document.createElement("div");e.id="root",e.innerHTML=html`
<slot></slot>
<div class="controls-wrapper">
<div class="controls top">
<div class="control left">
<slot name="controls-${Anchor.TopLeft}"></slot>
</div>
<div class="control center">
<slot name="controls-${Anchor.TopCenter}"></slot>
</div>
<div class="control right">
<slot name="controls-${Anchor.TopRight}"></slot>
</div>
</div>
<div class="controls center">
<div class="control left">
<slot name="controls-${Anchor.CenterLeft}"></slot>
</div>
<div class="control right">
<slot name="controls-${Anchor.CenterRight}"></slot>
</div>
</div>
<div class="controls bottom">
<div class="control left">
<slot name="controls-${Anchor.BottomLeft}"></slot>
</div>
<div class="control center">
<slot name="controls-${Anchor.BottomCenter}"></slot>
</div>
<div class="control right">
<slot name="controls-${Anchor.BottomRight}"></slot>
</div>
</div>
</div>
`,l.append(e);}static create(){return o.register(),document.createElement(o.tag)}static register(){defineCustomElements({[o.tag]:o});}static createStyleElement(){return css`:host{position:relative}:host #root{height:100%}.controls-wrapper{box-sizing:border-box;flex-direction:column;gap:.5rem;height:100%;margin:0 auto;max-width:960px;padding:1rem}.controls,.controls-wrapper{display:flex;justify-content:space-between}.controls{align-items:center;flex-direction:row}.controls.top{align-items:start}.controls.center{align-items:center}.controls.bottom{align-items:end}.control{display:flex;flex-direction:column}`}};o.tag="scandit-check-layout";var s=o;export{s as a};