import"./simple-login-avatar.js";import"./simple-login-camera.js";import"../../simple-icon/simple-icon.js";import"../../simple-icon/lib/simple-icons.js";import"../../simple-icon/lib/simple-icon-button-lite.js";import"../../simple-tooltip/simple-tooltip.js";class SimpleCameraSnap extends HTMLElement{constructor(e=!1){super(),this.tag=SimpleCameraSnap.tag,this.t={takePhoto:"Take Photo"},globalThis.dispatchEvent(new CustomEvent("i18n-manager-register-element",{detail:{context:this,namespace:"simple-login",localesPath:new URL("../locales/simple-login.es.json",import.meta.url).href+"/../",updateCallback:"render",locales:["es"]}})),this.template=globalThis.document.createElement("template"),this.attachShadow({mode:"open"}),e||this.render()}static get tag(){return"simple-camera-snap"}render(){this.shadowRoot.innerHTML=null,this.template.innerHTML=this.html,globalThis.ShadyCSS&&globalThis.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0))}get html(){return`\n    <style>\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        flex-direction: column;\n        /* style simple-login-camera according to simple-login-snap styles */\n        --simple-login-camera-background: var(--simple-camera-snap-color, #36bed4);\n        --simple-login-camera-error: var(--simple-camera-snap-error, red);\n        --simple-login-avatar-color: var(--simple-camera-snap-color, #36bed4);\n        --simple-login-camera-size: var(--simple-camera-snap-height, calc(var(--simple-camera-snap-width, unset) * 16/9));\n\n        /* style simple-login-avatar according to simple-login-snap styles */\n        --simple-login-avatar-background: var(--simple-camera-snap-background, white);\n        --simple-login-avatar-border-radius: var(--simple-camera-snap-border-radius,100%);\n      }\n      :host([hidden]) {\n        display: none !important;\n      }\n      #selfie {\n        position: absolute;\n        margin: 0;\n        display: flex;\n        justify-content: center;\n        width: 100%;\n        overflow: hidden;\n      }\n      #snap {\n        color: var(--simple-camera-snap-color, #36bed4);\n        background-color: var(--simple-camera-snap-background, white);\n        border-radius: var(--simple-camera-snap-button-border-radius);\n        opacity: var(--simple-camera-snap-button-opacity);\n      }\n      .has-snap {\n        z-index: 3;\n      }\n      #selfie img {\n        z-index: 2;        \n        width: calc(177.77777777777% / var(--simple-login-camera-aspect, 1));\n        background-color: rgba(0, 0, 0, 0);\n      }\n      .buttons {\n        display: flex;\n        width: 100%;\n        justify-content: space-around;\n        position: var(--simple-camera-snap-button-container-position);\n        bottom: var(--simple-camera-snap-button-container-bottom);\n        z-index: var(--simple-camera-snap-button-container-z-index);\n      }\n    </style>\n    <simple-login-avatar part="avatar">\n      <div id="selfie" part="selfie"></div>\n      <simple-login-camera id="camera" autoplay part="camera"></simple-login-camera>\n    </simple-login-avatar>\n    <div class="buttons">\n      <simple-icon-button-lite id="snap" icon="image:camera-alt" part="snap-button"></simple-icon-button-lite>\n      <simple-tooltip for="snap" part="snap-tooltip">${this.t.takePhoto}</simple-tooltip>\n      <slot></slot>\n    </div>\n    `}connectedCallback(){navigator.mediaDevices||(this.shadowRoot.querySelector("#snap").style.display="none"),this.shadowRoot.querySelector("#snap").addEventListener("click",this.snapPhoto.bind(this)),this._t={...this.t}}disconnectedCallback(){this.shadowRoot.querySelector("#snap").removeEventListener("click",this.snapPhoto.bind(this))}async snapPhoto(e){const a=this.shadowRoot.querySelector("#camera");if(a.hasAttribute("autoplay")){let t="",n=await a.takeASnap();try{t=await a.takeASnap().then((e=>a.renderImage(e)))}catch(e){console.log(e)}a.removeAttribute("autoplay");const i=this.shadowRoot.querySelector("#selfie");i.innerHTML="",i.appendChild(t),this.dispatchEvent(new CustomEvent("simple-camera-snap-image",{bubbles:!0,composed:!0,cancelable:!0,detail:{img:t,raw:n}})),i.classList.add("has-snap")}else this.clearPhoto(e)}clearPhoto(e){this.shadowRoot.querySelector("#camera").setAttribute("autoplay","autoplay");const a=this.shadowRoot.querySelector("#selfie");a.innerHTML="",a.classList.remove("has-snap")}}customElements.define(SimpleCameraSnap.tag,SimpleCameraSnap);export{SimpleCameraSnap};