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

Scandit Data Capture SDK for the Web

import"./BarcodeArAnnotation.js";import{BarcodeArInfoAnnotationBodyComponent as e}from"../atoms/BarcodeArInfoAnnotationBodyComponent.js";import{BarcodeArInfoAnnotationFooter as t}from"../atoms/BarcodeArInfoAnnotationFooter.js";import{BarcodeArInfoAnnotationHeader as n}from"../atoms/BarcodeArInfoAnnotationHeader.js";import{cssArrows as r}from"../atoms/private/CssArrows.js";import{updatePosition as i}from"./private/updatePosition.js";import{Color as a,ScanditIcon as o}from"@scandit/web-datacapture-core";import{ScanditHTMLElement as s,css as c,defineCustomElements as l,html as u}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";let d=function(e){return e[e.Top=`top-center`]=`Top`,e[e.Bottom=`bottom-center`]=`Bottom`,e[e.Left=`left-center`]=`Left`,e[e.Right=`right-center`]=`Right`,e}({}),f=function(e){return e.Small=`small`,e.Medium=`medium`,e.Large=`large`,e}({}),p=function(e){return e.InfoAnnotationTap=`BarcodeArInfoAnnotationEventTap`,e}({});const m=`slot[name='header']`,h=`slot[name='footer']`,g=`--arrow-background-color`;var _=class f extends s{get barcode(){return this._barcode}set barcode(e){this._barcode=e}constructor(){super(),this.isEntireAnnotationTappable=!1,this.annotationTrigger=`highlightTapAndBarcodeScan`,this._widthPreset=`small`,this.onPointerUpListener=this.onPointerUp.bind(this),this.onSlotChangeListener=this.onSlotChange.bind(this),this.highlightableElementListenerMap=new Map;let e=this.attachShadow({mode:`open`});e.innerHTML=u`<div class="container arw-${d.Bottom} ${`small`}"><slot name="header"></slot><div class="body-container"><slot></slot></div><slot name="footer"></slot></div>`,this.containerElement=e.querySelector(`.container`),e.append(f.createStyleElement().cloneNode(!0)),e.append(r())}updatePosition(e,t,n){i(this,e,t,0)}set anchor(e){for(let e of Object.values(d))this.containerElement.classList.remove(`arw-${e}`);this.containerElement.classList.add(`arw-${e}`),this.updateArrowColor()}get anchor(){for(let e of Object.values(d))if(this.containerElement.classList.contains(`arw-${e}`))return e;return d.Bottom}set widthPreset(e){this._widthPreset=e,this.containerElement.classList.remove(`small`,`medium`,`large`),this.containerElement.classList.add(e)}get widthPreset(){switch(!0){case this.containerElement.classList.contains(`small`):return`small`;case this.containerElement.classList.contains(`medium`):return`medium`;case this.containerElement.classList.contains(`large`):return`large`;default:return`small`}}get backgroundColor(){let e=this.containerElement.style.getPropertyValue(`--background-color`);return a.fromHex(e)}set backgroundColor(e){this.containerElement.style.setProperty(`--background-color`,`#${e.toJSON()}`),this.updateArrowColor()}set body(e){this.append(...e)}get body(){var e;let t=(e=this.shadowRoot)==null?void 0:e.querySelector(`slot:not([name])`);return(t==null?void 0:t.assignedElements({flatten:!0}))??[]}set header(e){let t=this.querySelector(m);e!=null&&(t==null?void 0:t.assignedElements()[0])!==e&&(t==null||t.remove(),e.setAttribute(`slot`,`header`),this.append(e))}get header(){var e;let t=(e=this.shadowRoot)==null?void 0:e.querySelector(m);return((t==null?void 0:t.assignedElements())??[])[0]}set footer(e){let t=this.querySelector(h);e!=null&&(t==null?void 0:t.assignedElements()[0])!==e&&(t==null||t.remove(),e.setAttribute(`slot`,`footer`),this.append(e))}get footer(){var e;let t=(e=this.shadowRoot)==null?void 0:e.querySelector(h);return((t==null?void 0:t.assignedElements())??[])[0]}set hasTip(e){this.containerElement.classList.toggle(`arw-${this.anchor}`,e)}get hasTip(){return this.containerElement.classList.contains(`arw-${this.anchor}`)}static create(e){f.register();let t=document.createElement(f.tag);return t.barcode=e,t}static register(){l({[e.tag]:e,[n.tag]:n,[t.tag]:t,[f.tag]:f})}static createStyleElement(){return c`:host{--background-color:#fff;--arrow-size:7px;--arrow-background-color:var(--background-color);--arrow-offset:10px;font-family:SF Pro Display,sans-serif}.container{background-color:var(--background-color);border-radius:16px;display:flex;flex-direction:column;min-width:100px;position:relative;transition:opacity .3s ease;width:100%}.container.highlighted{opacity:.75}.container.${`small`}{width:180px}.container.${`medium`}{width:210px}.container.${`large`}{width:240px}.body-container{padding-bottom:1rem}`}connectedCallback(){var e,t;this.widthPreset=this._widthPreset,this.addEventListener(`pointerup`,this.onPointerUpListener);let n=(e=this.shadowRoot)==null?void 0:e.querySelector(m),r=(t=this.shadowRoot)==null?void 0:t.querySelector(h);n==null||n.addEventListener(`slotchange`,this.onSlotChangeListener),r==null||r.addEventListener(`slotchange`,this.onSlotChangeListener),this.onSlotChange(),this.isEntireAnnotationTappable&&this.makeHighlightable(this.containerElement)}disconnectedCallback(){var e,t;let n=(e=this.shadowRoot)==null?void 0:e.querySelector(m),r=(t=this.shadowRoot)==null?void 0:t.querySelector(h);n==null||n.removeEventListener(`slotchange`,this.onSlotChangeListener),r==null||r.removeEventListener(`slotchange`,this.onSlotChangeListener),this.removeEventListener(`pointerup`,this.onPointerUpListener);for(let[e,t]of this.highlightableElementListenerMap)e.removeEventListener(`pointerdown`,t.pointerdown),e.removeEventListener(`pointerup`,t.pointerup)}onSlotChange(){var e,t;let n=(e=this.shadowRoot)==null?void 0:e.querySelector(m),r=(t=this.shadowRoot)==null?void 0:t.querySelector(h),i=(n==null?void 0:n.assignedElements())??[],a=(r==null?void 0:r.assignedElements())??[];for(let e of i)e.style.setProperty(`--top-left-corner-radius`,`16px`),e.style.setProperty(`--top-right-corner-radius`,`16px`),this.isEntireAnnotationTappable||this.makeHighlightable(e);for(let e of a)e.style.setProperty(`--bottom-left-corner-radius`,`16px`),e.style.setProperty(`--bottom-right-corner-radius`,`16px`),this.isEntireAnnotationTappable||this.makeHighlightable(e);this.updateArrowColor()}updateArrowColor(){this.style.removeProperty(g),this.header||this.footer?this.header&&this.anchor.startsWith(`top`)?this.style.setProperty(g,`#${this.header.backgroundColor.toJSON()}`):this.footer&&this.anchor.startsWith(`bottom`)&&this.style.setProperty(g,`#${this.footer.backgroundColor.toJSON()}`):this.body.length>0&&!this.header&&!this.footer&&this.style.setProperty(g,`#${this.backgroundColor.toJSON()}`)}makeHighlightable(e){var t;let n=e.classList.contains(`container`)?e:(t=e.shadowRoot)==null?void 0:t.querySelector(`.container`);if(!n||this.highlightableElementListenerMap.has(n))return;let r=()=>{n.classList.add(`highlighted`)},i=()=>{n.classList.remove(`highlighted`)};n.addEventListener(`pointerdown`,r),n.addEventListener(`pointerup`,i),this.highlightableElementListenerMap.set(n,{pointerdown:r,pointerup:i})}onPointerUp(r){var i,a,s;let c=(i=r.target)==null?void 0:i.closest(n.tag),l=(a=r.target)==null?void 0:a.closest(t.tag),u=(s=r.target)==null?void 0:s.closest(`${e.tag} ${o.tag}`),d=new CustomEvent(`BarcodeArInfoAnnotationEventTap`,{bubbles:!0});if(c){var f,p;(f=this.listener)==null||(p=f.onInfoAnnotationHeaderTapped)==null||p.call(f,this),this.dispatchEvent(d)}if(l){var m,h;(m=this.listener)==null||(h=m.onInfoAnnotationFooterTapped)==null||h.call(m,this),this.dispatchEvent(d)}if((u==null?void 0:u.slot)===`left-barcode-icon`){let e=this.body.findIndex(e=>e.contains(u));if(this.body[e].isLeftIconTappable){var g,_;(g=this.listener)==null||(_=g.onInfoAnnotationLeftIconTapped)==null||_.call(g,this,this.body[e],e),this.dispatchEvent(d)}}if((u==null?void 0:u.slot)===`right-barcode-icon`){let e=this.body.findIndex(e=>e.contains(u));if(this.body[e].isRightIconTappable){var v,y;(v=this.listener)==null||(y=v.onInfoAnnotationRightIconTapped)==null||y.call(v,this,this.body[e],e),this.dispatchEvent(d)}}if(this.isEntireAnnotationTappable){var b,x;(b=this.listener)==null||(x=b.onInfoAnnotationTapped)==null||x.call(b,this),this.dispatchEvent(d)}}};_.tag=`scandit-barcode-ar-info-annotation`;export{_ as BarcodeArInfoAnnotation,d as BarcodeArInfoAnnotationAnchor,p as BarcodeArInfoAnnotationEvent,f as BarcodeArInfoAnnotationWidthPreset};