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

Scandit Data Capture SDK for the Web

import {a}from'./chunk-F7NAOKPF.js';import {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';import {Color}from'@scandit/web-datacapture-core';var e=class e extends ScanditHTMLElement{constructor(){super();let t=this.attachShadow({mode:"open"});t.innerHTML=html`<div class="container">
      <span class="ghost-arrow arw-bottom-center"></span>
      <div class="icon-container">
        <slot name="barcode-icon"></slot>
      </div>
      <span class="text"></span>
    </div>`,this.containerElement=t.querySelector(".container"),this.textContainer=this.containerElement.querySelector(".text"),t.append(e.createStyleElement().cloneNode(true)),t.append(a());}set text(t){this.updateText(t);}get text(){var t;return (t=this.textContainer.textContent)!=null?t:""}set tip(t){this.toggleTip(t);}get tip(){var t,o;return (o=(t=this.containerElement.querySelector(".ghost-arrow"))==null?void 0:t.classList.value.includes("arw-"))!=null?o:false}set textColor(t){this.style.setProperty("--text-color",`#${t.toJSON()}`);}get textColor(){return Color.fromJSON(this.style.getPropertyValue("--text-color"))}set expanded(t){this.toggleAttribute("expanded",t);}set backgroundColor(t){this.style.setProperty("--background-color",`#${t.toJSON()}`),this.style.setProperty("--arrow-background-color",`#${t.toJSON()}`);}get backgroundColor(){let t=this.style.getPropertyValue("--background-color");return Color.fromJSON(t===""?"FFFFFF":t)}get expanded(){return this.hasAttribute("expanded")}static create(){return document.createElement(e.tag)}static register(){defineCustomElements({[e.tag]:e});}static createStyleElement(){return css`:host{display:inline-flex;--size:32px;--padding:0px;--background-color:#fff;--text-color:#${gray900.toJSON()};--expanded-width:190px;--arrow-size:calc(var(--size)/5);--arrow-background-color:#fff;--arrow-offset:0px;cursor:pointer;font-family:SF Pro Text,sans-serif;font-size:1rem;font-style:normal;font-weight:600;transition:transform .25s ease-in-out;user-select:none;-webkit-tap-highlight-color:transparent}.ghost-arrow{height:var(--size);left:0;position:absolute;top:-2px;width:var(--size)}:host([hidden]){display:none}.container{background-color:var(--background-color);border-radius:calc(var(--size) + var(--padding)/2);box-shadow:0 1px 2px 0 #${gray900.withAlpha(.3).toJSON()};display:inline-flex;flex-direction:row;gap:10px;padding:var(--padding);position:relative;transition:width .25s ease-in-out;white-space:nowrap}.container,.icon-container{align-items:center;height:var(--size);width:var(--size)}.icon-container{display:flex;justify-content:center;position:absolute}.container span.text{color:var(--text-color);max-width:0;opacity:0;overflow:hidden;position:absolute;transform:translateX(0);transition:opacity .25s ease-in-out,transform .25s ease-in-out,max-width .25s ease-in-out;white-space:nowrap}:host([expanded]) .container span.text{max-width:calc(var(--expanded-width) - var(--size) - 2px);opacity:1;transform:translateX(var(--size))}:host([expanded]){transform:translateX(calc(var(--expanded-width) - 50% - 2px - var(--size)/2))}:host([expanded]) .container{width:var(--expanded-width)}`}connectedCallback(){this.setAttribute("tip","true");}attributeChangedCallback(t,o,r){t==="text"?this.updateText(r):t==="tip"&&this.toggleTip(r==="true"||r==="");}updateText(t){this.textContainer.textContent=t.slice(0,20);}toggleTip(t){var o;(o=this.containerElement.querySelector(".ghost-arrow"))==null||o.classList.toggle("arw-bottom-center",t);}};e.tag="scandit-status-icon-container",e.observedAttributes=["text","tip"];var s=e;export{s as a};