@scandit/web-datacapture-barcode/build/js/find/ui/atoms/Dot.js

Scandit Data Capture SDK for the Web

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