diff --git a/Standard UI Components/components.js b/Standard UI Components/components.js
index 0d2514d..30d8c2f 100644
--- a/Standard UI Components/components.js
+++ b/Standard UI Components/components.js
@@ -159,7 +159,6 @@ smInput.innerHTML = `
}
:host{
display: inline-flex;
- flex-direction: column;
}
.hide{
opacity: 0 !important;
@@ -190,6 +189,7 @@ smInput.innerHTML = `
background: rgba(var(--text-color), 0.1);
font-family: var(--font-family);
width: 100%
+ outline: none;
}
input:focus{
@@ -364,10 +364,6 @@ customElements.define('sm-input',
})
this.input.addEventListener('input', e => {
this.checkInput()
- this.dispatchEvent(new CustomEvent('input', {
- bubbles: true,
- composed: true
- }))
})
this.input.addEventListener('change', e => {
this.valueChanged = true;
@@ -1886,12 +1882,14 @@ smPopup.innerHTML = `
width: 100%;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid rgba(var(--text-color), 0.3);
}
.popup-top{
display: flex;
width: 100%;
}
+ .popup-body{
+ padding: 1.5rem;
+ }
.heading{
font-weight: 400;
}
@@ -1966,7 +1964,9 @@ smPopup.innerHTML = `
-
+
+
+
`;
@@ -1976,7 +1976,17 @@ customElements.define('sm-popup', class extends HTMLElement {
this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true))
}
- show() {
+ 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)';
@@ -1990,9 +2000,15 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popup.style.transform = 'translateY(100%)';
else
this.popup.style.transform = 'scale(0.9)';
- const scrollY = document.body.style.top;
- document.body.setAttribute('style', `overflow: auto; top: initial`)
- window.scrollTo(0, parseInt(scrollY || '0') * -1);
+ if (typeof this.popupStack !== 'undefined') {
+ this.popupStack.pop()
+ if (this.popupStack.items.length === 0) {
+ this.resumeScrolling()
+ }
+ }
+ else {
+ this.resumeScrolling()
+ }
}
handleTouchStart = (e) => {
@@ -2036,6 +2052,8 @@ customElements.define('sm-popup', class extends HTMLElement {
}
connectedCallback() {
+ this.pinned = false
+ this.popupStack
this.popupContainer = this.shadowRoot.querySelector('.popup-container')
this.popup = this.shadowRoot.querySelector('.popup')
this.offset
@@ -2051,7 +2069,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.shadowRoot.querySelector('.heading').textContent = this.getAttribute('heading')
this.popupContainer.addEventListener('mousedown', e => {
- if (e.target === this.popupContainer) {
+ if (e.target === this.popupContainer && !this.pinned) {
this.hide()
}
})
@@ -2099,7 +2117,6 @@ smCarousel.innerHTML = `
stroke-linejoin: round;
cursor: pointer;
min-width: 0;
- z-index: 1;
background: rgba(var(--text-color), 1);
box-shadow: 0 0.2rem 0.2rem #00000020,
0 0.5rem 1rem #00000040;
@@ -2139,8 +2156,7 @@ smCarousel.innerHTML = `
align-items: center;
}
.carousel{
- display: grid;
- grid-auto-flow: column;
+ display: flex;
max-width: 100%;
overflow: auto hidden;
scroll-snap-type: x mandatory;
@@ -2806,13 +2822,20 @@ customElements.define('sm-menu', class extends HTMLElement {
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'){
+ 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()