@@ -1532,7 +1714,9 @@ smStripSelect.innerHTML = `
customElements.define('sm-strip-select', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smStripSelect.content.cloneNode(true))
}
static get observedAttributes() {
return ['value']
@@ -1573,8 +1757,7 @@ customElements.define('sm-strip-select', class extends HTMLElement {
if (entries[0].isIntersecting) {
this.previousArrow.classList.add('hide')
this.previousGradient.classList.add('hide')
- }
- else {
+ } else {
this.previousArrow.classList.remove('hide')
this.previousGradient.classList.remove('hide')
}
@@ -1586,8 +1769,7 @@ customElements.define('sm-strip-select', class extends HTMLElement {
if (entries[0].isIntersecting) {
this.nextArrow.classList.add('hide')
this.nextGradient.classList.add('hide')
- }
- else {
+ } else {
this.nextArrow.classList.remove('hide')
this.nextGradient.classList.remove('hide')
}
@@ -1608,7 +1790,11 @@ customElements.define('sm-strip-select', class extends HTMLElement {
if (previousOption)
previousOption.classList.remove('active')
e.target.classList.add('active')
- e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+ e.target.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ block: 'nearest'
+ })
this.setAttribute('value', e.detail.value)
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
@@ -1641,36 +1827,41 @@ customElements.define('sm-strip-select', class extends HTMLElement {
const smStripOption = document.createElement('template')
smStripOption.innerHTML = `
@@ -1678,7 +1869,9 @@ smStripOption.innerHTML = `
customElements.define('sm-strip-option', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smStripOption.content.cloneNode(true))
}
sendDetails() {
let optionSelected = new CustomEvent('optionSelected', {
@@ -1717,14 +1910,17 @@ smPopup.innerHTML = `
*{
padding: 0;
margin: 0;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
:host{
position: fixed;
+ display: -ms-grid;
display: grid;
z-index: 10;
}
.popup-container{
+ display: -ms-grid;
display: grid;
position: fixed;
top: 0;
@@ -1733,39 +1929,71 @@ smPopup.innerHTML = `
right: 0;
place-items: center;
background: rgba(0, 0, 0, 0.6);
+ -webkit-transition: opacity 0.3s ease;
+ -o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
z-index: 10;
}
:host(.stacked) .popup{
- transform: scale(0.9) translateY(-2rem) !important;
+ -webkit-transform: scale(0.9) translateY(-2rem) !important;
+ -ms-transform: scale(0.9) translateY(-2rem) !important;
+ transform: scale(0.9) translateY(-2rem) !important;
}
.popup{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
position: relative;
- align-self: flex-end;
- align-items: flex-start;
+ -ms-flex-item-align: end;
+ align-self: flex-end;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
width: 100%;
border-radius: 0.8rem 0.8rem 0 0;
- transform: translateY(100%);
+ -webkit-transform: translateY(100%);
+ -ms-transform: translateY(100%);
+ transform: translateY(100%);
+ -webkit-transition: -webkit-transform 0.3s;
+ transition: -webkit-transform 0.3s;
+ -o-transition: transform 0.3s;
transition: transform 0.3s;
+ transition: transform 0.3s, -webkit-transform 0.3s;
background: rgba(var(--foreground-color), 1);
- box-shadow: 0 -1rem 2rem #00000020;
+ -webkit-box-shadow: 0 -1rem 2rem #00000020;
+ box-shadow: 0 -1rem 2rem #00000020;
max-height: 90vh;
}
.container-header{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
width: 100%;
- align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.popup-top{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
width: 100%;
}
.popup-body{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
- flex: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
width: 100%;
padding: 1.5rem;
overflow-y: auto;
@@ -1782,18 +2010,30 @@ smPopup.innerHTML = `
}
@media screen and (min-width: 640px){
.popup{
+ width: -webkit-max-content;
+ width: -moz-max-content;
width: max-content;
- align-self: center;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
border-radius: 0.4rem;
height: auto;
- transform: translateY(1rem);
- box-shadow: 0 3rem 2rem -0.5rem #00000040;
+ -webkit-transform: translateY(1rem);
+ -ms-transform: translateY(1rem);
+ transform: translateY(1rem);
+ -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
+ box-shadow: 0 3rem 2rem -0.5rem #00000040;
}
}
@media screen and (max-width: 640px){
.popup-top{
- flex-direction: column;
- align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.handle{
height: 0.3rem;
@@ -1814,21 +2054,23 @@ smPopup.innerHTML = `
}
`;
customElements.define('sm-popup', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smPopup.content.cloneNode(true))
this.allowClosing = false
}
@@ -1842,14 +2084,14 @@ customElements.define('sm-popup', class extends HTMLElement {
}
show = (pinned, popupStack) => {
- if(popupStack)
+ if (popupStack)
this.popupStack = popupStack
if (this.popupStack && !this.hasAttribute('open')) {
this.popupStack.push({
popup: this,
permission: pinned
})
- if (this.popupStack.items.length > 1){
+ if (this.popupStack.items.length > 1) {
this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
}
this.dispatchEvent(
@@ -1860,7 +2102,7 @@ customElements.define('sm-popup', class extends HTMLElement {
popupStack: this.popupStack
}
})
- )
+ )
this.setAttribute('open', '')
this.pinned = pinned
this.popupContainer.classList.remove('hide')
@@ -1870,7 +2112,7 @@ customElements.define('sm-popup', class extends HTMLElement {
return this.popupStack
}
hide = () => {
- if(window.innerWidth < 640)
+ if (window.innerWidth < 640)
this.popup.style.transform = 'translateY(100%)';
else
this.popup.style.transform = 'translateY(1rem)';
@@ -1878,14 +2120,12 @@ customElements.define('sm-popup', class extends HTMLElement {
this.removeAttribute('open')
if (typeof this.popupStack !== 'undefined') {
this.popupStack.pop()
- if (this.popupStack.items.length){
+ if (this.popupStack.items.length) {
this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
- }
- else {
+ } else {
this.resumeScrolling()
}
- }
- else {
+ } else {
this.resumeScrolling()
}
@@ -1927,7 +2167,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popup.style.transform = `translateY(-${this.offset}px)`
}*/
}
-
+
handleTouchEnd = (e) => {
this.touchEndTime = e.timeStamp
cancelAnimationFrame(this.touchEndAnimataion)
@@ -1938,20 +2178,17 @@ customElements.define('sm-popup', class extends HTMLElement {
if (this.pinned) {
this.show()
return
- }
- else
+ } else
this.hide()
- }
- else {
+ } else {
this.show()
}
- }
- else {
+ } else {
if (this.touchEndY > this.touchStartY)
- if (this.pinned) {
- this.show()
- return
- }
+ if (this.pinned) {
+ this.show()
+ return
+ }
else
this.hide()
}
@@ -1983,8 +2220,7 @@ customElements.define('sm-popup', class extends HTMLElement {
if (this.pinned) {
this.show()
return
- }
- else
+ } else
this.hide()
}
})
@@ -2018,13 +2254,18 @@ smCarousel.innerHTML = `
*{
padding: 0;
margin: 0;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
:host{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.icon {
position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
fill: none;
height: 2.6rem;
@@ -2039,10 +2280,14 @@ smCarousel.innerHTML = `
cursor: pointer;
min-width: 0;
background: rgba(var(--text-color), 1);
- box-shadow: 0 0.2rem 0.2rem #00000020,
+ -webkit-box-shadow: 0 0.2rem 0.2rem #00000020,
+ 0 0.5rem 1rem #00000040;
+ box-shadow: 0 0.2rem 0.2rem #00000020,
0 0.5rem 1rem #00000040;
-webkit-tap-highlight-color: transparent;
- transform: scale(0);
+ -webkit-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
z-index: 1;
}
.hide{
@@ -2050,7 +2295,9 @@ smCarousel.innerHTML = `
opacity: 0;
}
.expand{
- transform: scale(1)
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1)
}
.previous-item{
left: 1rem;
@@ -2060,21 +2307,31 @@ smCarousel.innerHTML = `
}
.carousel-container{
position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
width: 100%;
- align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.carousel{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
max-width: 100%;
width: 100%;
overflow: auto hidden;
- scroll-snap-type: x mandatory;
+ -ms-scroll-snap-type: x mandatory;
+ scroll-snap-type: x mandatory;
}
.indicators{
+ display: -ms-grid;
display: grid;
grid-auto-flow: column;
- justify-content: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
position: absolute;
bottom: -1rem;
gap: 0.5rem;
@@ -2085,10 +2342,14 @@ smCarousel.innerHTML = `
padding: 0.2rem;
background: rgba(var(--text-color), 0.3);
border-radius: 1rem;
+ -webkit-transition: 0.2s;
+ -o-transition: 0.2s;
transition: 0.2s;
}
.dot.active{
- transform: scale(1.5);
+ -webkit-transform: scale(1.5);
+ -ms-transform: scale(1.5);
+ transform: scale(1.5);
background: var(--accent-color);
}
slot::slotted(*){
@@ -2133,15 +2394,15 @@ scroll-snap-align: end;
-
+
@@ -2150,7 +2411,9 @@ scroll-snap-align: end;
customElements.define('sm-carousel', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smCarousel.content.cloneNode(true))
}
static get observedAttributes() {
@@ -2187,37 +2450,37 @@ customElements.define('sm-carousel', class extends HTMLElement {
let frag = document.createDocumentFragment();
if (this.hasAttribute('indicator'))
this.showIndicator = true
-
-
+
+
let firstVisible = false,
lastVisible = false
const allElementsObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
- if(this.showIndicator)
+ if (this.showIndicator)
if (entry.isIntersecting) {
this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
}
- else
- this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
+ else
+ this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
if (!entry.target.previousElementSibling)
- if(entry.isIntersecting) {
+ if (entry.isIntersecting) {
this.previousArrow.classList.remove('expand')
firstVisible = true
}
- else {
- this.previousArrow.classList.add('expand')
- firstVisible = false
- }
+ else {
+ this.previousArrow.classList.add('expand')
+ firstVisible = false
+ }
if (!entry.target.nextElementSibling)
- if(entry.isIntersecting) {
+ if (entry.isIntersecting) {
this.nextArrow.classList.remove('expand')
lastVisible = true
}
- else {
- this.nextArrow.classList.add('expand')
+ else {
+ this.nextArrow.classList.add('expand')
- lastVisible = false
- }
+ lastVisible = false
+ }
if (firstVisible && lastVisible)
this.indicatorsContainer.classList.add('hide')
else
@@ -2239,7 +2502,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
this.carouselSlot.addEventListener('slotchange', e => {
this.carouselItems = this.carouselSlot.assignedElements()
this.carouselItems.forEach(item => allElementsObserver.observe(item))
- if(this.showIndicator){
+ if (this.showIndicator) {
this.indicatorsContainer.innerHTML = ``
this.carouselItems.forEach((item, index) => {
let dot = document.createElement('div')
@@ -2283,131 +2546,153 @@ customElements.define('sm-carousel', class extends HTMLElement {
const smNotifications = document.createElement('template')
smNotifications.innerHTML = `
@@ -2416,10 +2701,12 @@ stroke-width: 6;
customElements.define('sm-notifications', class extends HTMLElement {
constructor() {
super()
- this.shadow = this.attachShadow({ mode: 'open' }).append(smNotifications.content.cloneNode(true))
+ this.shadow = this.attachShadow({
+ mode: 'open'
+ }).append(smNotifications.content.cloneNode(true))
}
- handleTouchStart =(e) => {
+ handleTouchStart = (e) => {
this.notification = e.target.closest('.notification')
this.touchStartX = e.changedTouches[0].clientX
this.notification.style.transition = 'initial'
@@ -2431,8 +2718,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
if (this.touchStartX < e.changedTouches[0].clientX) {
this.offset = e.changedTouches[0].clientX - this.touchStartX;
this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
- }
- else {
+ } else {
this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
}
@@ -2446,19 +2732,15 @@ customElements.define('sm-notifications', class extends HTMLElement {
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) {
+ } else if (this.touchStartX - this.touchEndX > this.threshold) {
this.removeNotification(this.notification, true)
- }
- else {
+ } else {
this.resetPosition()
}
- }
- else {
+ } else {
if (this.touchEndX > this.touchStartX) {
this.removeNotification(this.notification)
- }
- else {
+ } else {
this.removeNotification(this.notification, true)
}
}
@@ -2485,8 +2767,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
`
- }
- else if (type === 'success') {
+ } else if (type === 'success') {
composition += `