/
`;customElements.define('sm-audio', class extends HTMLElement{constructor(){super(); this.attachShadow({mode: 'open'}).append(smAudio.content.cloneNode(true)) this.playing=false;}static get observedAttributes(){return ['src']}play(){this.audio.play() this.playing=false; this.pauseBtn.classList.remove('hide') this.playBtn.classList.add('hide')}pause(){this.audio.pause() this.playing=true; this.pauseBtn.classList.add('hide') this.playBtn.classList.remove('hide')}get isPlaying(){return this.playing;}connectedCallback(){this.playBtn=this.shadowRoot.querySelector('.play'); this.pauseBtn=this.shadowRoot.querySelector('.pause'); this.audio=this.shadowRoot.querySelector('audio') this.playBtn.addEventListener('click', e=>{this.play()}) this.pauseBtn.addEventListener('click', e=>{this.pause()}) this.audio.addEventListener('ended', e=>{this.pause()}) let width; if ('ResizeObserver' in window){let resizeObserver=new ResizeObserver(entries=>{entries.forEach(entry=>{width=entry.contentRect.width;})}) resizeObserver.observe(this)}else{let observer=new IntersectionObserver((entries, observer)=>{if (entries[0].isIntersecting) width=this.shadowRoot.querySelector('.audio').offsetWidth;},{threshold: 1}) observer.observe(this)}this.audio.addEventListener('timeupdate', e=>{let time=this.audio.currentTime, minutes=Math.floor(time / 60), seconds=Math.floor(time - minutes * 60), y=seconds < 10 ? "0" + seconds : seconds; this.shadowRoot.querySelector('.current-time').textContent=`${minutes}:${y}` this.shadowRoot.querySelector('.track').style.width=(width / this.audio.duration) * this.audio.currentTime + 'px'})}attributeChangedCallback(name, oldValue, newValue){if (oldValue !==newValue){if (name==='src'){if (this.hasAttribute('src') && newValue.trim() !==''){this.shadowRoot.querySelector('audio').src=newValue; this.shadowRoot.querySelector('audio').onloadedmetadata=()=>{let duration=this.audio.duration, minutes=Math.floor(duration / 60), seconds=Math.floor(duration - minutes * 60), y=seconds < 10 ? "0" + seconds : seconds; this.shadowRoot.querySelector('.duration').textContent=`${minutes}:${y}`;}}else this.classList.add('disabled')}}}})//switchconst smSwitch=document.createElement('template')smSwitch.innerHTML=`
`customElements.define('sm-switch', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smSwitch.content.cloneNode(true)) this.switch=this.shadowRoot.querySelector('.switch'); this.input=this.shadowRoot.querySelector('input') this.isChecked=false this.isDisabled=false}static get observedAttributes(){return ['disabled', 'checked']}get disabled(){return this.getAttribute('disabled')}set disabled(val){this.setAttribute('disabled', val)}get checked(){return this.isChecked}set checked(value){this.setAttribute('checked', value)}dispatch(){this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true}))}connectedCallback(){this.addEventListener('keyup', e=>{if ((e.code==="Enter" || e.code==="Space") && this.isDisabled==false){this.isChecked=!this.isChecked this.setAttribute('checked', this.isChecked)}})}attributeChangedCallback(name, oldValue, newValue){if (oldValue !==newValue){if (name==='disabled'){if (newValue==='true'){this.switch.classList.add('disabled') this.isDisabled=true}else{this.switch.classList.remove('disabled') this.isDisabled=false}}if (name==='checked'){if (newValue=='true'){this.isChecked=true this.input.checked=true this.dispatch()}else{this.isChecked=false this.input.checked=false this.dispatch()}}}}})// selectconst smSelect=document.createElement('template')smSelect.innerHTML=`
`;customElements.define('sm-select', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smSelect.content.cloneNode(true))}static get observedAttributes(){return ['value']}get value(){return this.getAttribute('value')}set value(val){this.setAttribute('value', val)}collapse(){this.optionList.animate(this.slideUp, this.animationOptions) this.optionList.classList.add('hide') this.chevron.classList.remove('rotate') this.open=false}connectedCallback(){this.availableOptions this.optionList=this.shadowRoot.querySelector('.options') this.chevron=this.shadowRoot.querySelector('.toggle') let slot=this.shadowRoot.querySelector('.options slot'), selection=this.shadowRoot.querySelector('.selection'), previousOption this.open=false; this.slideDown=[{transform: `translateY(-0.5rem)`},{transform: `translateY(0)`}], this.slideUp=[{transform: `translateY(0)`},{transform: `translateY(-0.5rem)`}], this.animationOptions={duration: 300, fill: "forwards", easing: 'ease'}selection.addEventListener('click', e=>{if (!this.open){this.optionList.classList.remove('hide') this.optionList.animate(this.slideDown, this.animationOptions) this.chevron.classList.add('rotate') this.open=true}else{this.collapse()}}) selection.addEventListener('keydown', e=>{if (e.code==='ArrowDown' || e.code==='ArrowRight'){e.preventDefault() this.availableOptions[0].focus()}if (e.code==='Enter' || e.code==='Space') if (!this.open){this.optionList.classList.remove('hide') this.optionList.animate(this.slideDown, this.animationOptions) this.chevron.classList.add('rotate') this.open=true}else{this.collapse()}}) this.optionList.addEventListener('keydown', e=>{if (e.code==='ArrowUp' || e.code==='ArrowRight'){e.preventDefault() if (document.activeElement.previousElementSibling){document.activeElement.previousElementSibling.focus()}}if (e.code==='ArrowDown' || e.code==='ArrowLeft'){e.preventDefault() if (document.activeElement.nextElementSibling) document.activeElement.nextElementSibling.focus()}}) this.addEventListener('optionSelected', e=>{if (previousOption !==e.target){this.setAttribute('value', e.detail.value) this.shadowRoot.querySelector('.option-text').textContent=e.detail.text; this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true})) if (previousOption){previousOption.classList.remove('check-selected')}previousOption=e.target;}if (!e.detail.switching) this.collapse() e.target.classList.add('check-selected')}) slot.addEventListener('slotchange', e=>{this.availableOptions=slot.assignedElements() if (this.availableOptions[0]){let firstElement=this.availableOptions[0]; previousOption=firstElement; firstElement.classList.add('check-selected') this.setAttribute('value', firstElement.getAttribute('value')) this.shadowRoot.querySelector('.option-text').textContent=firstElement.textContent this.availableOptions.forEach((element, index)=>{element.setAttribute('data-rank', index + 1); element.setAttribute('tabindex', "0");})}}); document.addEventListener('mousedown', e=>{if (!this.contains(e.target) && this.open){this.collapse()}})}})// optionconst smOption=document.createElement('template')smOption.innerHTML=`
`;customElements.define('sm-option', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smOption.content.cloneNode(true))}sendDetails(switching){let optionSelected=new CustomEvent('optionSelected',{bubbles: true, composed: true, detail:{text: this.textContent, value: this.getAttribute('value'), switching: switching}}) this.dispatchEvent(optionSelected)}connectedCallback(){let validKey=[ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'] this.addEventListener('click', e=>{this.sendDetails()}) this.addEventListener('keyup', e=>{if (e.code==='Enter' || e.code==='Space'){e.preventDefault() this.sendDetails(false)}if (validKey.includes(e.code)){e.preventDefault() this.sendDetails(true)}}) if (this.hasAttribute('default')){setTimeout(()=>{this.sendDetails()}, 0);}}})// selectconst smStripSelect=document.createElement('template')smStripSelect.innerHTML=`
`;customElements.define('sm-strip-select', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smStripSelect.content.cloneNode(true))}static get observedAttributes(){return ['value']}get value(){return this.getAttribute('value')}set value(val){this.setAttribute('value', val)}scrollLeft(){this.select.scrollBy({top: 0, left: -this.scrollDistance, behavior: 'smooth'})}scrollRight(){this.select.scrollBy({top: 0, left: this.scrollDistance, behavior: 'smooth'})}connectedCallback(){let previousOption, slot=this.shadowRoot.querySelector('slot'); this.selectContainer=this.shadowRoot.querySelector('.select-container') this.select=this.shadowRoot.querySelector('.select') this.nextArrow=this.shadowRoot.querySelector('.next-item') this.previousArrow=this.shadowRoot.querySelector('.previous-item') this.nextGradient=this.shadowRoot.querySelector('.right') this.previousGradient=this.shadowRoot.querySelector('.left') this.selectOptions this.scrollDistance=this.selectContainer.getBoundingClientRect().width const firstElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.previousArrow.classList.add('hide') this.previousGradient.classList.add('hide')}else{this.previousArrow.classList.remove('hide') this.previousGradient.classList.remove('hide')}},{root: this.selectContainer, threshold: 0.95}) const lastElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.nextArrow.classList.add('hide') this.nextGradient.classList.add('hide')}else{this.nextArrow.classList.remove('hide') this.nextGradient.classList.remove('hide')}},{root: this.selectContainer, threshold: 0.95}) const selectObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.scrollDistance=this.selectContainer.getBoundingClientRect().width}}) selectObserver.observe(this.selectContainer) this.addEventListener('optionSelected', e=>{if (previousOption===e.target) return; if (previousOption) previousOption.classList.remove('active') e.target.classList.add('active') e.target.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'nearest'}) this.setAttribute('value', e.detail.value) this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true})) previousOption=e.target;}) slot.addEventListener('slotchange', e=>{this.selectOptions=slot.assignedElements() firstElementObserver.observe(this.selectOptions[0]) lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) if (this.selectOptions[0]){let firstElement=this.selectOptions[0]; this.setAttribute('value', firstElement.getAttribute('value')) firstElement.classList.add('active') previousOption=firstElement;}}); this.nextArrow.addEventListener('click', this.scrollRight) this.previousArrow.addEventListener('click', this.scrollLeft)}disconnectedCallback(){this.nextArrow.removeEventListener('click', this.scrollRight) this.previousArrow.removeEventListener('click', this.scrollLeft)}})// optionconst smStripOption=document.createElement('template')smStripOption.innerHTML=`
`;customElements.define('sm-strip-option', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smStripOption.content.cloneNode(true))}sendDetails(){let optionSelected=new CustomEvent('optionSelected',{bubbles: true, composed: true, detail:{text: this.textContent, value: this.getAttribute('value')}}) this.dispatchEvent(optionSelected)}connectedCallback(){this.addEventListener('click', e=>{this.sendDetails()}) this.addEventListener('keyup', e=>{if (e.code==='Enter' || e.code==='Space'){e.preventDefault() this.sendDetails(false)}}) if (this.hasAttribute('default')){setTimeout(()=>{this.sendDetails()}, 0);}}})//popupconst smPopup=document.createElement('template')smPopup.innerHTML=``;customElements.define('sm-popup', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smPopup.content.cloneNode(true))}resumeScrolling(){const scrollY=document.body.style.top; window.scrollTo(0, parseInt(scrollY || '0') * -1); setTimeout(()=>{document.body.setAttribute('style', `overflow: auto; top: initial`)}, 300);}show(pinned, popupStack){this.pinned=pinned this.popupStack=popupStack this.popupContainer.classList.remove('hide') if (window.innerWidth < 648) this.popup.style.transform='translateY(0)'; else this.popup.style.transform='scale(1)'; document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)}hide(){this.popupContainer.classList.add('hide') if (window.innerWidth < 648) this.popup.style.transform='translateY(100%)'; else this.popup.style.transform='scale(0.9)'; if (typeof this.popupStack !=='undefined'){this.popupStack.pop() if (this.popupStack.items.length===0){this.resumeScrolling()}}else{this.resumeScrolling()}}handleTouchStart(e){this.touchStartY=e.changedTouches[0].clientY this.popup.style.transition='initial' this.touchStartTime=e.timeStamp}handleTouchMove(e){if (this.touchStartY < e.changedTouches[0].clientY){this.offset=e.changedTouches[0].clientY - this.touchStartY; this.touchEndAnimataion=window.requestAnimationFrame(this.movePopup)}/*else{offset=touchStartY - e.changedTouches[0].clientY; this.popup.style.transform=`translateY(-${offset}px)`}*/}handleTouchEnd(e){this.touchEndTime=e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) this.touchEndY=e.changedTouches[0].clientY this.popup.style.transition='transform 0.3s' if (this.touchEndTime - this.touchStartTime > 200){if (this.touchEndY - this.touchStartY > this.threshold){this.hide()}else{this.show()}}else{if (this.touchEndY > this.touchStartY) this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.pinned=false this.popupStack this.popupContainer=this.shadowRoot.querySelector('.popup-container') this.popup=this.shadowRoot.querySelector('.popup') this.offset this.popupHeader=this.shadowRoot.querySelector('.popup-top') this.touchStartY=0 this.touchEndY=0 this.touchStartTime=0 this.touchEndTime=0 this.threshold=this.popup.getBoundingClientRect().height * 0.3 this.touchEndAnimataion; if (this.hasAttribute('heading')) this.shadowRoot.querySelector('.heading').textContent=this.getAttribute('heading') this.popupContainer.addEventListener('mousedown', e=>{if (e.target===this.popupContainer && !this.pinned){this.hide()}}) this.shadowRoot.querySelector('.close').addEventListener('click', e=>{this.hide()}) this.popupHeader.addEventListener('touchstart', this.handleTouchStart) this.popupHeader.addEventListener('touchmove', this.handleTouchMove) this.popupHeader.addEventListener('touchend', this.handleTouchEnd)}disconnectedCallback(){this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)}})//carouselconst smCarousel=document.createElement('template')smCarousel.innerHTML=`
`;customElements.define('sm-carousel', class extends HTMLElement{constructor(){super() this.shadow=this.attachShadow({mode: 'open'}).append(smCarousel.content.cloneNode(true))}scrollLeft(){this.carousel.scrollBy({top: 0, left: -this.scrollDistance, behavior: 'smooth'})}scrollRight(){this.carousel.scrollBy({top: 0, left: this.scrollDistance, behavior: 'smooth'})}connectedCallback(){this.carousel=this.shadowRoot.querySelector('.carousel') this.carouselContainer=this.shadowRoot.querySelector('.carousel-container') this.carouselSlot=this.shadowRoot.querySelector('slot') this.nextArrow=this.shadowRoot.querySelector('.next-item') this.previousArrow=this.shadowRoot.querySelector('.previous-item') this.nextGradient=this.shadowRoot.querySelector('.right') this.previousGradient=this.shadowRoot.querySelector('.left') this.carouselItems this.scrollDistance=this.carouselContainer.getBoundingClientRect().width / 3 const firstElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.previousArrow.classList.remove('expand') this.previousGradient.classList.add('hide')}else{this.previousArrow.classList.add('expand') this.previousGradient.classList.remove('hide')}},{root: this.carouselContainer, threshold: 0.9}) const lastElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.nextArrow.classList.remove('expand') this.nextGradient.classList.add('hide')}else{this.nextArrow.classList.add('expand') this.nextGradient.classList.remove('hide')}},{root: this.carouselContainer, threshold: 0.9}) const carouselObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.scrollDistance=this.carouselContainer.getBoundingClientRect().width / 3}}) carouselObserver.observe(this.carouselContainer) this.carouselSlot.addEventListener('slotchange', e=>{this.carouselItems=this.carouselSlot.assignedElements() firstElementObserver.observe(this.carouselItems[0]) lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])}) this.addEventListener('keyup', e=>{if (e.code==='ArrowLeft') this.scrollRight() else this.scrollRight()}) this.nextArrow.addEventListener('click', this.scrollRight) this.previousArrow.addEventListener('click', this.scrollLeft)}disconnectedCallback(){this.nextArrow.removeEventListener('click', this.scrollRight) this.previousArrow.removeEventListener('click', this.scrollLeft)}})//notificationsconst smNotifications=document.createElement('template')smNotifications.innerHTML=`
`customElements.define('sm-notifications', class extends HTMLElement{constructor(){super() this.shadow=this.attachShadow({mode: 'open'}).append(smNotifications.content.cloneNode(true))}handleTouchStart(e){this.notification=e.target.closest('.notification') this.touchStartX=e.changedTouches[0].clientX this.notification.style.transition='initial' this.touchStartTime=e.timeStamp}handleTouchMove(e){if (this.touchStartX < e.changedTouches[0].clientX){this.offset=e.changedTouches[0].clientX - this.touchStartX; this.touchEndAnimataion=requestAnimationFrame(this.movePopup)}else{this.offset=-(this.touchStartX - e.changedTouches[0].clientX); this.touchEndAnimataion=requestAnimationFrame(this.movePopup)}}handleTouchEnd(e){this.notification.style.transition='height 0.3s, transform 0.3s, opacity 0.3s' this.touchEndTime=e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) this.touchEndX=e.changedTouches[0].clientX if (this.touchEndTime - this.touchStartTime > 200){if (this.touchEndX - this.touchStartX > this.threshold){this.removeNotification(this.notification)}else if (this.touchStartX - this.touchEndX > this.threshold){this.removeNotification(this.notification, true)}else{this.resetPosition()}}else{if (this.touchEndX > this.touchStartX){this.removeNotification(this.notification)}else{this.removeNotification(this.notification, true)}}}movePopup(){this.notification.style.transform=`translateX(${this.offset}px)`}resetPosition(){this.notification.style.transform=`translateX(0)`}push(messageHeader, messageBody, options){let notification=document.createElement('div'), composition=``,{pinned, type}=options; notification.classList.add('notification') if (pinned) notification.classList.add('pinned') composition +=`
` if (type==='error'){composition +=` `}else if (type==='success'){composition +=` `}composition +=` ${messageHeader}
${messageBody}
` notification.innerHTML=composition this.notificationPanel.prepend(notification) if (window.innerWidth > 640){notification.animate([{transform: `translateX(1rem)`, opacity: '0'},{transform: 'translateX(0)', opacity: '1'}], this.animationOptions).onfinish=()=>{notification.setAttribute('style', `transform: none;`);}}else{notification.setAttribute('style', `transform: translateY(0); opacity: 1`)}notification.addEventListener('touchstart', this.handleTouchStart) notification.addEventListener('touchmove', this.handleTouchMove) notification.addEventListener('touchend', this.handleTouchEnd)}removeNotification(notification, toLeft){notification.style.height=notification.scrollHeight + 'px'; if (!this.offset) this.offset=0; if (toLeft) notification.animate([{transform: `translateX(${this.offset}px)`, opacity: '1'},{transform: `translateX(-100%)`, opacity: '0'}], this.animationOptions).onfinish=()=>{notification.setAttribute('style', `height: 0; margin-bottom: 0`);}else{notification.animate([{transform: `translateX(${this.offset}px)`, opacity: '1'},{transform: `translateX(100%)`, opacity: '0'}], this.animationOptions).onfinish=()=>{notification.setAttribute('style', `height: 0; margin-bottom: 0`);}}setTimeout(()=>{notification.remove()}, this.animationOptions.duration * 2)}connectedCallback(){this.notificationPanel=this.shadowRoot.querySelector('.notification-panel') this.animationOptions={duration: 300, fill: "forwards", easing: "ease"}this.fontSize=Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) this.notification this.offset this.touchStartX=0 this.touchEndX=0 this.touchStartTime=0 this.touchEndTime=0 this.threshold=this.notificationPanel.getBoundingClientRect().width * 0.3 this.touchEndAnimataion; this.notificationPanel.addEventListener('click', e=>{if (e.target.closest('.close')) ( this.removeNotification(e.target.closest('.notification')) )}) const observer=new MutationObserver(mutationList=>{mutationList.forEach(mutation=>{if (mutation.type==='childList'){if (mutation.addedNodes.length){if (!mutation.addedNodes[0].classList.contains('pinned')) setTimeout(()=>{this.removeNotification(mutation.addedNodes[0])}, 4000); if (window.innerWidth > 640) this.notificationPanel.style.padding='1.5rem 0 3rem 1.5rem'; else this.notificationPanel.style.padding='1rem 1rem 2rem 1rem';}else if (mutation.removedNodes.length && !this.notificationPanel.children.length){this.notificationPanel.style.padding=0;}}})}) observer.observe(this.notificationPanel,{attributes: true, childList: true, subtree: true})}})// sm-menuconst smMenu=document.createElement('template')smMenu.innerHTML=`
`;customElements.define('sm-menu', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smMenu.content.cloneNode(true))}static get observedAttributes(){return ['value']}get value(){return this.getAttribute('value')}set value(val){this.setAttribute('value', val)}expand(){if (!this.open){if (this.containerDimensions.left > this.containerDimensions.width){this.optionList.style.right=0}else{this.optionList.style.right='auto'}this.optionList.classList.remove('hide') this.optionList.classList.add('no-transformations') this.open=true this.icon.classList.add('focused')}}collapse(){if (this.open){this.open=false this.icon.classList.remove('focused') this.optionList.classList.add('hide') this.optionList.classList.remove('no-transformations')}}connectedCallback(){this.availableOptions this.containerDimensions this.optionList=this.shadowRoot.querySelector('.options') let slot=this.shadowRoot.querySelector('.options slot'), menu=this.shadowRoot.querySelector('.menu') this.icon=this.shadowRoot.querySelector('.icon') this.open=false; menu.addEventListener('click', e=>{if (!this.open){this.expand()}else{this.collapse()}}) menu.addEventListener('keydown', e=>{if (e.code==='ArrowDown' || e.code==='ArrowRight'){e.preventDefault() this.availableOptions[0].focus()}if (e.code==='Enter' || e.code==='Space'){e.preventDefault() if (!this.open){this.expand()}else{this.collapse()}}}) this.optionList.addEventListener('keydown', e=>{if (e.code==='ArrowUp' || e.code==='ArrowRight'){e.preventDefault() if (document.activeElement.previousElementSibling){document.activeElement.previousElementSibling.focus()}}if (e.code==='ArrowDown' || e.code==='ArrowLeft'){e.preventDefault() if (document.activeElement.nextElementSibling) document.activeElement.nextElementSibling.focus()}}) this.optionList.addEventListener('click', e=>{this.collapse()}) slot.addEventListener('slotchange', e=>{this.availableOptions=slot.assignedElements() this.containerDimensions=this.optionList.getBoundingClientRect() this.menuDimensions=menu.getBoundingClientRect() if (this.containerDimensions.left > this.containerDimensions.width){this.optionList.style.right=0}else{this.optionList.style.right='auto'}}); window.addEventListener('mousedown', e=>{if (!this.contains(e.target) && e.button !==2){this.collapse()}}) if (this.hasAttribute('set-context') && this.getAttribute('set-context')==='true'){this.parentNode.setAttribute('oncontextmenu', 'return false') this.parentNode.addEventListener('mouseup', e=>{if (e.button===2){this.expand()}})}const intersectionObserver=new IntersectionObserver(entries=>{entries.forEach(entry=>{if (!entry.isIntersecting && this.open){if (window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height) this.optionList.classList.add('moveUp') else this.optionList.classList.remove('moveUp') if (entry.intersectionRect.left > this.containerDimensions.width){this.optionList.style.right=0}else{this.optionList.style.right='auto'}}})},{threshold: 1}) intersectionObserver.observe(this.optionList)}})// optionconst smMenuOption=document.createElement('template')smMenuOption.innerHTML=`
`;customElements.define('sm-menu-option', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smMenuOption.content.cloneNode(true))}connectedCallback(){this.addEventListener('keyup', e=>{if (e.code==='Enter' || e.code==='Space'){e.preventDefault() this.click()}}) this.setAttribute('tabindex', '0')}})// tab-headerconst smTabHeader=document.createElement('template')smTabHeader.innerHTML=`
`;customElements.define('sm-tab-header', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smTabHeader.content.cloneNode(true)) this.indicator=this.shadowRoot.querySelector('.indicator'); this.tabSlot=this.shadowRoot.querySelector('slot'); this.tabHeader=this.shadowRoot.querySelector('.tab-header');}sendDetails(element){this.dispatchEvent( new CustomEvent("switchtab",{bubbles: true, detail:{target: this.target, rank: parseInt(element.getAttribute('rank'))}}) )}connectedCallback(){if (!this.hasAttribute('target') || this.getAttribute('target').value==='') return; this.prevTab this.allTabs this.activeTab this.target=this.getAttribute('target') this.tabSlot.addEventListener('slotchange', ()=>{this.tabSlot.assignedElements().forEach((tab, index)=>{tab.setAttribute('rank', index)})}) this.allTabs=this.tabSlot.assignedElements(); this.tabSlot.addEventListener('click', e=>{if (e.target===this.prevTab || !e.target.closest('sm-tab')) return if (this.prevTab) this.prevTab.classList.remove('active') e.target.classList.add('active') e.target.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'}) this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) this.sendDetails(e.target) this.prevTab=e.target; this.activeTab=e.target;}) let resizeObserver=new ResizeObserver(entries=>{entries.forEach((entry)=>{if (this.prevTab){let tabDimensions=this.activeTab.getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)}})}) resizeObserver.observe(this) let observer=new IntersectionObserver((entries)=>{entries.forEach((entry)=>{if (entry.isIntersecting){this.indicator.style.transition='none' if (this.activeTab){let tabDimensions=this.activeTab.getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)}else{this.allTabs[0].classList.add('active') let tabDimensions=this.allTabs[0].getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) this.sendDetails(this.allTabs[0]) this.prevTab=this.tabSlot.assignedElements()[0]; this.activeTab=this.prevTab;}}})},{threshold: 1.0}) observer.observe(this)}})// tab-panelsconst smTabPanels=document.createElement('template')smTabPanels.innerHTML=`
Nothing to see here.
`;customElements.define('sm-tab-panels', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smTabPanels.content.cloneNode(true)) this.panelSlot=this.shadowRoot.querySelector('slot');}connectedCallback(){//animations let flyInLeft=[{opacity: 0, transform: 'translateX(-1rem)'},{opacity: 1, transform: 'none'}], flyInRight=[{opacity: 0, transform: 'translateX(1rem)'},{opacity: 1, transform: 'none'}], flyOutLeft=[{opacity: 1, transform: 'none'},{opacity: 0, transform: 'translateX(-1rem)'}], flyOutRight=[{opacity: 1, transform: 'none'},{opacity: 0, transform: 'translateX(1rem)'}], animationOptions={duration: 300, fill: 'forwards', easing: 'ease'}this.prevPanel this.allPanels this.previousRank this.panelSlot.addEventListener('slotchange', ()=>{this.panelSlot.assignedElements().forEach((panel)=>{panel.classList.add('hide-completely')})}) this.allPanels=this.panelSlot.assignedElements() this._targetBodyFlyRight=(targetBody)=>{targetBody.classList.remove('hide-completely') targetBody.animate(flyInRight, animationOptions)}this._targetBodyFlyLeft=(targetBody)=>{targetBody.classList.remove('hide-completely') targetBody.animate(flyInLeft, animationOptions)}document.addEventListener('switchtab', e=>{if (e.detail.target !==this.id) return if (this.prevPanel){let targetBody=this.allPanels[e.detail.rank], currentBody=this.prevPanel; if (this.previousRank < e.detail.rank){if (currentBody && !targetBody) currentBody.animate(flyOutLeft, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely')}else if (targetBody && !currentBody){this._targetBodyFlyRight(targetBody)}else if (currentBody && targetBody){currentBody.animate(flyOutLeft, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely') this._targetBodyFlyRight(targetBody)}}}else{if (currentBody && !targetBody) currentBody.animate(flyOutRight, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely')}else if (targetBody && !currentBody){this._targetBodyFlyLeft(targetBody)}else if (currentBody && targetBody){currentBody.animate(flyOutRight, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely') this._targetBodyFlyLeft(targetBody)}}}}else{this.allPanels[e.detail.rank].classList.remove('hide-completely')}this.previousRank=e.detail.rank this.prevPanel=this.allPanels[e.detail.rank];})}})