@scandit/web-datacapture-barcode/build/js/ar/ui/organisms/BarcodeArRectangleHighlight.js

Scandit Data Capture SDK for the Web

import{updatePosition as e}from"./private/updatePosition.js";import{Brush as t,Color as n}from"@scandit/web-datacapture-core";import{css as r,html as i}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";import{ScanditHTMLElement as a}from"@scandit/web-datacapture-core/build/js/private/utils/ScanditHTMLElement.js";import{defineCustomElements as o}from"@scandit/web-datacapture-core/build/js/private/utils/defineCustomElements.js";var s=class s extends a{constructor(){super(),this._brush=new t(n.fromHex(`#00FFFF`).withAlpha(.45),n.fromHex(`#00FFFF`),2),this._icon=null;let e=this.attachShadow({mode:`open`});e.innerHTML=i`<div class="container"><slot></slot></div>`,e.append(s.createStyleElement().cloneNode(!0))}connectedCallback(){this.setStylePropertyValue(s.widthCssVariable,`32px`),this.setStylePropertyValue(s.heightCssVariable,`32px`),this.setStylePropertyValue(s.backgroundColorCssVariable,`#${this._brush.fillColor.toJSON()}`),this.setStylePropertyValue(s.strokeColorCssVariable,`#${this._brush.strokeColor.toJSON()}`),this.setStylePropertyValue(s.strokeWidthCssVariable,`${this._brush.strokeWidth}px`)}set barcode(e){this._barcode=e}get barcode(){return this._barcode}set brush(e){this._brush=e,this.updateBrushColor()}get brush(){return this._brush}set icon(e){var t;(t=this._icon)==null||t.remove(),this._icon=null,e!=null&&(this._icon=e,this.append(this._icon))}get icon(){return this._icon}set width(e){this.setStylePropertyValue(s.widthCssVariable,`${e}px`)}set height(e){this.setStylePropertyValue(s.heightCssVariable,`${e}px`)}get height(){let e=this.getStylePropertyValue(s.heightCssVariable).replace(`px`,``);return Number.parseInt(e,10)}get width(){let e=this.getStylePropertyValue(s.widthCssVariable).replace(`px`,``);return Number.parseInt(e,10)}static create(e){s.register();let t=document.createElement(s.tag);return t.barcode=e,t}static register(){o({[s.tag]:s})}updateBrushColor(){this.setStylePropertyValue(s.backgroundColorCssVariable,`#${this._brush.fillColor.toJSON()}`),this.setStylePropertyValue(s.strokeColorCssVariable,`#${this._brush.strokeColor.toJSON()}`),this.setStylePropertyValue(s.strokeWidthCssVariable,`${this._brush.strokeWidth}px`)}setStylePropertyValue(e,t){this.style.setProperty(e,t)}getStylePropertyValue(e){return this.style.getPropertyValue(e)}static createStyleElement(){return r`:host{--width:32px;--height:32px;--background-color:#00ffff73;--stroke-color:#0ff;--stroke-width:2px}:host([hidden]){display:none}.container{align-items:center;background-color:var(--background-color);border:var(--stroke-width) solid var(--stroke-color);display:flex;height:calc(var(--height) - var(--stroke-width));justify-content:center;position:relative;width:calc(var(--width) - var(--stroke-width))}::slotted(*){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}`}updatePosition(t,n,r){e(this,t,n,r)}};s.tag=`scandit-barcode-ar-rectangle-highlight`,s.widthCssVariable=`--width`,s.heightCssVariable=`--height`,s.backgroundColorCssVariable=`--background-color`,s.strokeColorCssVariable=`--stroke-color`,s.strokeWidthCssVariable=`--stroke-width`;export{s as BarcodeArRectangleHighlight};