@scandit/web-datacapture-barcode/build/js/ar/ui/atoms/private/BarcodeStatusIconContainer.js

Scandit Data Capture SDK for the Web

import{cssArrows as e}from"./CssArrows.js";import{Color as t}from"@scandit/web-datacapture-core";import{ScanditHTMLElement as n,css as r,defineCustomElements as i,html as a}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";import{gray900 as o}from"@scandit/web-datacapture-core/build/js/private/ui/colors.js";var s=class s extends n{constructor(){super();let t=this.attachShadow({mode:`open`});t.innerHTML=a`<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(s.createStyleElement().cloneNode(!0)),t.append(e())}set text(e){this.updateText(e)}get text(){return this.textContainer.textContent??``}set tip(e){this.toggleTip(e)}get tip(){var e;return((e=this.containerElement.querySelector(`.ghost-arrow`))==null?void 0:e.classList.value.includes(`arw-`))??!1}set textColor(e){this.style.setProperty(`--text-color`,`#${e.toJSON()}`)}get textColor(){return t.fromJSON(this.style.getPropertyValue(`--text-color`))}set expanded(e){this.toggleAttribute(`expanded`,e)}set backgroundColor(e){this.style.setProperty(`--background-color`,`#${e.toJSON()}`),this.style.setProperty(`--arrow-background-color`,`#${e.toJSON()}`)}get backgroundColor(){let e=this.style.getPropertyValue(`--background-color`);return t.fromJSON(e===``?`FFFFFF`:e)}get expanded(){return this.hasAttribute(`expanded`)}static create(){return document.createElement(s.tag)}static register(){i({[s.tag]:s})}static createStyleElement(){return r`:host{display:inline-flex;--size:32px;--padding:0px;--background-color:#fff;--text-color:#${o.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 #${o.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(e,t,n){e===`text`?this.updateText(n):e===`tip`&&this.toggleTip(n===`true`||n===``)}updateText(e){this.textContainer.textContent=e.slice(0,20)}toggleTip(e){var t;(t=this.containerElement.querySelector(`.ghost-arrow`))==null||t.classList.toggle(`arw-bottom-center`,e)}};s.tag=`scandit-status-icon-container`,s.observedAttributes=[`text`,`tip`];export{s as BarcodeStatusIconContainer};