@scandit/web-datacapture-barcode/build/js/chunks/chunk-5A3VQBKX.js

Scandit Data Capture SDK for the Web

import {Color}from'@scandit/web-datacapture-core';import {primaryTeal100,gray900}from'@scandit/web-datacapture-core/build/js/private/ui/colors.js';import {ScanditHTMLElement,html,defineCustomElements,css}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var e=class e extends ScanditHTMLElement{constructor(){var r;super();let t=this.attachShadow({mode:"open"});t.innerHTML=html`<div class="dot"><div class="inner-dot"></div></div>`,t.append(e.createStyleElement().cloneNode(true)),this.dot=(r=this.shadowRoot)==null?void 0:r.querySelector(".dot");}set size(t){this.render({propChanged:"size",value:String(t)});}get size(){return Number(this.getAttribute("size"))}get variant(){return this.getAttribute("variant")}set variant(t){this.render({propChanged:"variant",value:t});}get pulse(){return !!this.getAttribute("pulse")}set pulse(t){this.render({propChanged:"pulse",value:t.toString()});}static create(){return e.createWithColors(primaryTeal100,Color.fromHex("#ffff"))}static createWithColors(t,r){e.register();let o=document.createElement(e.tag);return o.setPrimaryColor(t),o.setSecondaryColor(r),o}static createWithBrush(t,r){e.register();let o=document.createElement(e.tag);return o.setPrimaryColor(t.fillColor),o.setSecondaryColor(r),o.setStrokeColor(t.strokeColor),o.setStrokeWidth(t.strokeWidth),o}static register(){defineCustomElements({[e.tag]:e});}static createStyleElement(){return css`:host{display:block;--size:14px}.dot{--primary:#${primaryTeal100.toJSON()};--secondary:#${primaryTeal100.toJSON()};--primary-no-opacity:#${primaryTeal100.withAlpha(0).toJSON()};background-color:#fff;border-radius:50%;box-shadow:0 1px 2px 0 #${gray900.withAlpha(.3).toJSON()};height:var(--size);position:relative;width:var(--size)}.dot.pulse{animation:pulse 2s infinite}.dot.target{height:calc(var(--size) + var(--size)*1/1.285);width:calc(var(--size) + var(--size)*1/1.285)}.dot.target .inner-dot{background-color:var(--primary);height:calc(var(--size) + var(--size)*1/3);width:calc(var(--size) + var(--size)*1/3)}.inner-dot{background-color:var(--secondary);border-radius:50%;height:var(--size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--size)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--primary)}70%{box-shadow:0 0 0 var(--size) var(--primary-no-opacity)}to{box-shadow:0 0 0 0 var(--primary-no-opacity)}}`}connectedCallback(){}setPrimaryColor(t){this.dot.style.setProperty("--primary",`#${t.toJSON()}`),this.dot.style.setProperty("--primary-no-opacity",`#${t.withAlpha(0).toJSON()}`);}setSecondaryColor(t){this.dot.style.setProperty("--secondary",`#${t.toJSON()}`);}setStrokeColor(t){this.dot.style.setProperty("border-color",`#${t.toJSON()}`),this.dot.style.setProperty("border-style","solid");}setStrokeWidth(t){this.dot.style.setProperty("border-width",`${t}px`);}render({propChanged:t,value:r}){switch(t){case "size":{this.dot.style.setProperty("--size",`${r}px`);break}case "variant":{this.dot.classList.toggle("target",r==="target");break}case "pulse":{this.dot.classList.toggle("pulse",r==="true"||this.hasAttribute("pulse"));break}}}attributeChangedCallback(t,r,o){this.render({propChanged:t,value:o});}};e.tag="scandit-find-dot",e.observedAttributes=["size","variant","pulse"];var s=e;export{s as a};