@scandit/web-datacapture-core
Version:
Scandit Data Capture SDK for the Web
11 lines • 4.65 kB
JavaScript
import {a as a$3}from'./chunk-FPCLZS52.js';import {a as a$2}from'./chunk-UUGROS73.js';import {e}from'./chunk-IVDD7PCI.js';import {a as a$1}from'./chunk-EV4OEANA.js';import {a as a$6}from'./chunk-3A4KLILV.js';import {a as a$4}from'./chunk-MU6SADSF.js';import {a as a$5}from'./chunk-LSZZVJ6B.js';var b=(e=>(e.DidShow="didshow",e.DidHide="didhide",e.WillShow="willshow",e))(b||{}),o="--text-size",s="--text-color",n="--text-alignment",r="--text-weight",a="--line-height",l="--background-color",c="--corner-radius",h="--max-lines",f="ease-in-out",i=class i extends a$1{constructor(){super();this.toast=null;this._hintStyle=null;this._customIcon=null;this.currentAnimation=null;this.animationDuration=250;let t=this.attachShadow({mode:"open"});this._exclamationIcon=a$2.create(),this._checkIcon=a$3.create(),this._exclamationIcon.size=24,this._checkIcon.size=24,t.innerHTML=a$4`
<div class="toast">
<slot name="first-child"></slot>
<div class="left">
<slot name="icon"></slot>
</div>
<p class="middle">
<slot></slot>
</p>
</div>
`,t.append(i.createStyleElement().cloneNode(true)),this.toast=t.querySelector(".toast");}static createStyleElement(){return a$5`:host{display:inline-block;font-family:SF Pro Display,sans-serif}:host([hidden]){display:none}.toast{${o}:1rem;${s}:#000;${r}:400;${n}:${"center"};${a}:1.5rem;${l}:#fff;${c}:.25rem;${h}:2;align-items:flex-start;background-color:var(${l});border-radius:var(${c});color:var(${s});display:flex;flex-direction:row;font-size:var(${o});font-weight:var(${r});gap:.625rem;justify-content:var(${n});line-height:var(${a});padding:1rem}:host([direction=column]) .toast{align-items:center;flex-direction:column}:host([direction=row]) .toast{align-items:center;flex-direction:row}.toast .left{align-self:flex-start;display:flex}.toast.icon-${"none"} .left{display:none}.toast p.middle{display:inline-block;display:-webkit-box;margin:0;padding:0;text-align:var(${n});-webkit-line-clamp:var(${h});-webkit-box-orient:vertical;align-self:center;overflow:hidden;text-shadow:0 1px 2px #${e.withAlpha(.3).toJSON()}}p.middle{text-align:var(${n})}`}get hintStyle(){return this._hintStyle}set hintStyle(t){this._hintStyle=t,this.render();}get customIcon(){return this._customIcon}set customIcon(t){this._customIcon=t,this.render();}get showAnimation(){return new Animation(new KeyframeEffect(this,[{opacity:0},{opacity:1}],{duration:this.animationDuration,fill:"both",easing:f}))}get hideAnimation(){return new Animation(new KeyframeEffect(this,[{opacity:1},{opacity:0}],{duration:this.animationDuration,fill:"both",easing:f}))}static create(){return i.register(),document.createElement(i.tag)}static register(){a$6({[i.tag]:i});}async show(){return this.toggle(true)}async hide(){return this.toggle(false)}connectedCallback(){this.render();}async toggle(t){var e,d;if(this.currentAnimation==null){this.animationDuration=(d=(e=this.hintStyle)==null?void 0:e.isAnimatedToView)==null||d?250:0,this.currentAnimation=t?this.showAnimation:this.hideAnimation,t&&this.dispatchEvent(new CustomEvent("willshow",{bubbles:true})),this.currentAnimation.play();try{await this.currentAnimation.finished,this.dispatchEvent(new CustomEvent(t?"didshow":"didhide",{bubbles:true,detail:{target:this}}));}catch(E){}finally{this.currentAnimation=null;}}}render(){var t;if(!(!this.toast||!this.hintStyle)){this.toast.className="toast",this.toast.style.setProperty(o,`${this.hintStyle.textSize}px`),this.toast.style.setProperty(s,`#${this.hintStyle.textColor}`),this.toast.style.setProperty(r,this.hintStyle.textWeight.toString()),this.toast.style.setProperty(n,this.hintStyle.textAlignment),this.toast.style.setProperty(a,`${this.hintStyle.lineHeight/14}`),this.toast.style.setProperty(l,`#${this.hintStyle.backgroundColor}`),this.toast.style.setProperty(c,`${this.hintStyle.cornerRadius/10}rem`),this.toast.style.setProperty(h,this.hintStyle.maxLines.toString());for(let e of this.querySelectorAll("[slot=icon]"))e.remove();this._customIcon?(this._customIcon.setAttribute("slot","icon"),this.append(this._customIcon),this.toast.classList.remove("icon-none")):(this.toast.classList.toggle("icon-none",this.hintStyle.hintIcon==="none"),this.hintStyle.hintIcon==="check"?(this._checkIcon.setAttribute("slot","icon"),this.append(this._checkIcon)):this.hintStyle.hintIcon==="exclamationMark"&&(this._exclamationIcon.setAttribute("slot","icon"),this.append(this._exclamationIcon)),this.hintStyle.iconColor&&((t=this.querySelector("[slot=icon]"))==null||t.setAttribute("fill",`#${this.hintStyle.iconColor}`)));}}};i.tag="scandit-toast-hint";var x=i;export{b as a,x as b};