@scandit/web-datacapture-core
Version:
Scandit Data Capture SDK for the Web
1 lines • 5.13 kB
JavaScript
import {e}from'./chunk-IVDD7PCI.js';import {a}from'./chunk-EV4OEANA.js';import {a as a$2}from'./chunk-3A4KLILV.js';import {a as a$1}from'./chunk-MU6SADSF.js';import {a as a$3}from'./chunk-LSZZVJ6B.js';import {n as n$1}from'./chunk-77BBIAZE.js';var v=(e=>(e.Circle="circle",e.Square="square",e))(v||{}),c="--width",l="--height",h="--background-color",d="--stroke-color",p="--stroke-width",n=class n extends a{constructor(){super();this.onSlotChangeListener=this.onSlotChange.bind(this);let e=this.attachShadow({mode:"open"});e.innerHTML=a$1`<div class="container shape-none"><slot /></div>`,this.containerElement=e.querySelector(".container"),this.setStylePropertyValue(c,"32px"),this.setStylePropertyValue(l,"32px"),this.setStylePropertyValue(h,"transparent"),this.setStylePropertyValue(d,"#fff"),this.setStylePropertyValue(p,"0px"),e.append(n.createStyleElement().cloneNode(true));}get iconColor(){var o,r;let e=(o=this.shadowRoot)==null?void 0:o.querySelector("slot"),t=(r=e==null?void 0:e.assignedElements())!=null?r:[];return n$1.fromHex(t[0].fill)}set iconColor(e){this.render({propChanged:"iconcolor",value:`#${e.toJSON()}`});}get backgroundColor(){return n$1.fromHex(this.getStylePropertyValue(h))}set backgroundColor(e){this.render({propChanged:"backgroundcolor",value:`#${e.toJSON()}`});}get backgroundStrokeColor(){return n$1.fromHex(this.getStylePropertyValue(d))}set backgroundStrokeColor(e){this.render({propChanged:"backgroundstrokecolor",value:`#${e.toJSON()}`});}get backgroundStrokeWidth(){let e=this.getStylePropertyValue(p);return Number.parseInt(e,10)}set backgroundStrokeWidth(e){this.render({propChanged:"backgroundstrokewidth",value:String(e)});}get backgroundShape(){var t;let e=(t=/shape-(.*)/.exec(this.containerElement.classList.value))==null?void 0:t[1];return e!=null&&e!=="none"?e:null}set backgroundShape(e){this.render({propChanged:"backgroundshape",value:e!=null?e:"none"});}set width(e){this.render({propChanged:"width",value:String(e)}),this.updateIconSizeProperty(e,this.height);}get width(){let e=this.getStylePropertyValue(c).replace("px","");return Number.parseInt(e,10)}set height(e){this.render({propChanged:"height",value:String(e)}),this.updateIconSizeProperty(this.width,e);}get height(){let e=this.getStylePropertyValue(l).replace("px","");return Number.parseInt(e,10)}static create(){return n.register(),document.createElement(n.tag)}static register(){a$2({[n.tag]:n});}static createStyleElement(){return a$3`:host{display:inline-block;--width:32px;--height:32px;--background-color:transparent;--stroke-color:#fff;--stroke-width:0px}:host([hidden]){display:none}.container{background-color:var(--background-color);box-shadow:0 1px 2px 0 #${e.withAlpha(.3).toJSON()};height:calc(var(--height) - var(--stroke-width));outline:var(--stroke-width) solid var(--stroke-color);position:relative;width:calc(var(--width) - var(--stroke-width))}.container.shape-${"circle"}{border-radius:50%}.container.shape-${"square"}{border-radius:0}.container.shape-none{box-shadow:unset}::slotted(*){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}`}onSlotChange(){this.updateIconSizeProperty(this.width,this.height);}connectedCallback(){var t;let e=(t=this.shadowRoot)==null?void 0:t.querySelector("slot");e==null||e.addEventListener("slotchange",this.onSlotChangeListener);}disconnectedCallback(){var t;let e=(t=this.shadowRoot)==null?void 0:t.querySelector("slot");e==null||e.removeEventListener("slotchange",this.onSlotChangeListener);}render({propChanged:e,value:t}){switch(e){case "width":{this.setStylePropertyValue(c,`${t}px`);break}case "height":{this.setStylePropertyValue(l,`${t}px`);break}case "backgroundstrokewidth":{this.setStylePropertyValue(p,`${t}px`);break}case "backgroundstrokecolor":{this.setStylePropertyValue(d,t);break}case "backgroundcolor":{this.setStylePropertyValue(h,t);break}case "iconcolor":{this.updateFillIconColor(n$1.fromHex(t));break}case "backgroundshape":{let o=t;this.containerElement.classList.toggle("shape-circle",o==="circle"),this.containerElement.classList.toggle("shape-square",o==="square"),this.containerElement.classList.toggle("shape-none",o==="none");break}}}attributeChangedCallback(e,t,o){this.render({propChanged:e,value:o});}getStylePropertyValue(e){return this.containerElement.style.getPropertyValue(e)}setStylePropertyValue(e,t){this.containerElement.style.setProperty(e,t);}updateIconSizeProperty(e,t){var s,u;let o=(s=this.shadowRoot)==null?void 0:s.querySelector("slot"),r=(u=o==null?void 0:o.assignedElements())!=null?u:[],a=Math.min(e,t);for(let C of r)C.size=a/2;}setIconSize(e){var r,a;let t=(r=this.shadowRoot)==null?void 0:r.querySelector("slot"),o=(a=t==null?void 0:t.assignedElements())!=null?a:[];for(let s of o)s.size=e;}updateFillIconColor(e){var r,a;let t=(r=this.shadowRoot)==null?void 0:r.querySelector("slot"),o=(a=t==null?void 0:t.assignedElements())!=null?a:[];for(let s of o)s.fill=`#${e.toJSON()}`;}};n.tag="scandit-barcode-icon-container",n.observedAttributes=["width","height","backgroundstrokecolor","backgroundcolor","backgroundstrokewidth","iconcolor","backgroundshape"];var y=n;export{v as a,y as b};