"use strict";const html="\n\n\n \n\n \n\n \n \n
\n\n \n \n
\n\n";(function(){function a(){const a=document.createElement("div");a.style.position="absolute",document.body.appendChild(a);var b;return a.currentStyle?b=a.currentStyle.position:window.getComputedStyle&&(b=document.defaultView.getComputedStyle(a,null).getPropertyValue("position")),document.body.removeChild(a),"static"===b}function b(a){return"VIDEO"===a.tagName}function c(a){return a.mozHasAudio||!!a.webkitAudioDecodedByteCount||!!(a.audioTracks&&a.audioTracks.length)}class d extends HTMLElement{get _nextIndexInCycle(){return this.index+1>=this.children.length?0:this.index+1}get _previousIndexInCycle(){return 0>this.index-1?this.children.length-1:this.index-1}show(a){this.children.hasOwnProperty(a)&&(this._prepareForMoving(),this.index=a,this._updateAfterMoving())}showNext(){this.children.hasOwnProperty(this.index+1)&&this.show(this.index+1)}showPrevious(){this.children.hasOwnProperty(this.index-1)&&this.show(this.index-1)}showNextInCycle(){this.show(this._nextIndexInCycle)}showPreviousInCycle(){this.show(this._previousIndexInCycle)}_prepareForMoving(){this._pauseVideo(),this._updateSoundButton()}_updateLabel(){const a=this.children[this.index];this.ariaLabel=null===a.ariaLabel?`${this.index+1}`:`${this.index+1}: ${a.ariaLabel}`,this._label.textContent=`${this.index+1}/${this.children.length}`}_pauseVideo(){const a=this.children[this.index];b(a)&&(a.muted=!0,a.pause())}_playVideo(){const a=this.children[this.index];b(a)&&(a.currentTime=0,a.play())}_updateAfterMoving(){this._transformView(),this._playVideo(),this._updateSoundButton(),this._updateLabel()}get isStylesDisabled(){return this._root.classList.contains("no-css")}_transformView(){if(this.isStylesDisabled){const a=this.children[this.index];Array.from(this.children).forEach(b=>{b.hidden=b!==a})}else this._content.style.transform=`translateX(calc(-100% * ${this.index}))`}_toggleSound(){const a=this.children[this.index];a.muted=!a.muted,this._updateSoundButton()}_unableSoundButton(){this._sound.disabled=!1,this._sound.tabIndex=0}_disableSoundButton(){this._sound.disabled=!0,this._sound.tabIndex=-1}_updateSoundButton(){const a=this.children[this.index];// - mute / unmute
a.muted?this._sound.classList.remove("unmuted"):this._sound.classList.add("unmuted"),b(a)&&c(a)?this._unableSoundButton():(this._disableSoundButton(),a.onloadeddata=b=>{a===b.target&&c(b.target)?this._unableSoundButton():this._disableSoundButton()})}get _root(){return this.shadowRoot.getElementById("wrapper")}get _content(){return this.shadowRoot.getElementById("content")}get _controls(){return this.shadowRoot.getElementById("controls")}get _sound(){return this.shadowRoot.getElementById("sound-button")}get _label(){return this.shadowRoot.getElementById("label")}// template...
constructor(){super(),this._render(),this.index=0,this.tabIndex=0,this.setAttribute("role","button"),this.ariaLive="assertive"}connectedCallback(){this._addEventListeners(),this.show(this.index)}_addEventListeners(){// - focus on click
// - show next when clicking on any child
// - show next/previous with keyboard
// - mute/unmute sound
// - mute/unmute sound
this._root.addEventListener("click",()=>{this.focus()},!1),Array.from(this.children).forEach(a=>{a.addEventListener("click",a=>{a.preventDefault(),this.showNextInCycle()},!1)}),this.addEventListener("keydown",a=>{"ArrowLeft"===a.code?this.showPrevious():"ArrowRight"===a.code?this.showNext():"KeyM"===a.code&&this._toggleSound()},!1),this._sound.addEventListener("click",a=>{a.preventDefault(),this._toggleSound()},!1)}_render(){const b=document.createElement("template");b.innerHTML=html,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(b.content.cloneNode(!0)),a()&&this._root.classList.add("no-css"),this._label.hidden=!1,this._controls.hidden=!1}}window.customElements.get("sequential-shots")||(window.HTMLSequentialShotsElement=d,window.customElements.define("sequential-shots",d))})();