@webqit/webflo 0.20.47 → 0.20.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/webflo-runtime/webflo-client/DeviceCapabilities.js +3 -0
- package/src/webflo-runtime/webflo-client/webflo-elements.js +838 -525
- package/test/browser/elements.src.build.js +668 -490
- package/test/browser/elements.src.build.js.map +3 -3
- package/test/browser/index.html +5 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/webflo-runtime/webflo-client/webflo-elements.js", "elements.src.js"],
|
|
4
|
-
"sourcesContent": ["// ---------------- BaseElement\n\nexport class BaseElement extends HTMLElement {\n\n static get events() {\n return [];\n }\n\n static get observedAttributes() {\n return this.events.map((e) => `on${e}`);\n }\n\n // ----------------\n\n #compiledEventHandlers = {};\n\n #compileAttrEventsIfNeeded(attrName, attrValue) {\n for (const eventName of this.constructor.events) {\n\n if (attrName !== `on${eventName}`) continue;\n\n if (this.#compiledEventHandlers[attrName]) {\n this.removeEventListener(eventName, this.#compiledEventHandlers[attrName]);\n this.#compiledEventHandlers[attrName] = null;\n }\n\n if (attrValue) {\n this.#compiledEventHandlers[attrName] = Function('event', attrValue).bind(this);\n this.addEventListener(eventName, this.#compiledEventHandlers[attrName]);\n }\n }\n }\n\n #initPropEventsSystem() {\n for (const eventName of this.constructor.events) {\n\n const attrName = `on${eventName}`;\n let _handler = null;\n\n Object.defineProperty(this, attrName, {\n get: () => _handler,\n set: (handler) => {\n if (_handler) {\n this.removeEventListener(eventName, _handler);\n _handler = null;\n }\n\n if (typeof handler === 'function') {\n this.addEventListener(eventName, handler);\n } else if (handler !== null && handler !== undefined) {\n throw new Error(`[${attrName}] handler must be null or a function`);\n }\n\n _handler = handler;\n }\n });\n }\n }\n\n // ----------------\n\n attributeChangedCallback(name, old, _new) {\n this.#compileAttrEventsIfNeeded(name, _new);\n }\n\n constructor() {\n super();\n this.#initPropEventsSystem();\n }\n}\n\n// ---------------- ToastElement\n\nexport class ToastElement extends BaseElement {\n\n set type(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('type');\n } else this.setAttribute('type', value);\n }\n\n get type() { return this.getAttribute('type'); }\n\n get contentHTML() { return ''; }\n\n get css() { return ''; }\n\n #childToast = null;\n\n #addNested() {\n if (this.#childToast) {\n this.shadowRoot.appendChild(this.#childToast);\n if (this.matches(':popover-open')) {\n this.#childToast.showPopover();\n }\n }\n }\n\n _processVisibility(slot) {\n if (this.hasAttribute('oncontent')) {\n if (slot.assignedNodes().find((n) => n.nodeName !== '#text' || n.textContent.trim())) {\n this.showPopover();\n } else this.hidePopover();\n }\n }\n\n render({ content, context }, childToast = null, recursion = 1) {\n if (context && recursion > 0) {\n const directChildToast = document.createElement(this.tagName);\n\n directChildToast.setAttribute('popover', this.getAttribute('popover') || 'auto');\n if (this.classList.contains('_top')) {\n directChildToast.classList.add('_top');\n }\n directChildToast.render({ content }, childToast, 0);\n\n this.render(context, directChildToast, recursion + 1);\n return;\n }\n\n this.#childToast?.remove();\n this.#childToast = childToast;\n // In case \"this\" is already connected\n this.#addNested();\n\n const childStartDelay = parseFloat(childToast?.style.getPropertyValue('--start-delay') || '0');\n this.style.setProperty('--start-delay', (childStartDelay + 0.1) + 's');\n\n // Render now\n this.type = content.type;\n this.innerHTML = content.message;\n }\n\n connectedCallback() {\n if (!this.popover) {\n this.popover = 'auto';\n }\n }\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n this.addEventListener('toggle', (e) => {\n if (e.newState === 'open') {\n this.#childToast?.showPopover();\n } else if (e.newState === 'closed') {\n this.#childToast?.hidePopover();\n if (this.getAttribute('oncontent') === 'always') {\n this.innerHTML = '';\n }\n }\n });\n\n this.shadowRoot.innerHTML = `\n <div class=\"container\">\n\n <svg class=\"icon _info\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M444-296h72v-228h-72v228Zm36-312q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm0 528q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _success\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M390-298 246-442l72-72 72 72 252-252 72 72-324 324Zm90 218q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _error\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _warning\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <div class=\"_content\" part=\"content\">\n <slot\n onslotchange=\"this.getRootNode().host?._processVisibility(this);\"\n >${this.contentHTML}</slot>\n </div>\n <button class=\"close-button\" part=\"close-button\" onclick=\"this.getRootNode().host.hidePopover();\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n </button>\n\n </div>\n <style>\n * {\n box-sizing: border-box;\n }\n \n @keyframes flash {\n from {\n background-color: transparent;\n }\n\n 50% {\n background-color: rgba(125, 125, 125, 0.2);\n }\n\n to {\n background-color: transparent;\n }\n }\n\n :host {\n --color-default: var(--toast-color-default, whitesmoke);\n --color-info: var(--toast-color-info, skyblue);\n --color-success: var(--toast-color-success, lightgreen);\n --color-error: var(--toast-color-error, coral);\n --color-warning: var(--toast-color-warning, coral);\n\n --wq-radius: var(--toast-radius, 1rem);\n --background: var(--toast-background, rgb(30, 30, 30));\n --shadow: var(--toast-shadow, rgb(30, 30, 30));\n\n --dir: 1;\n --translation: calc(var(--toast-translation, 50px) * var(--dir));\n --exit-factor: var(--toast-exit-factor, -1);\n\n --entry-transform: translateY(var(--translation));\n --exit-transform: translateY(calc(var(--translation) * var(--exit-factor)));\n }\n\n :host {\n border: none;\n background: none;\n\n margin-bottom: 0;\n padding: 1rem;\n\n /* Transition */\n transition:\n opacity 0.2s,\n transform 0.2s,\n bottom 0.1s,\n top 0.1s,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n \n /* Exit state */\n transform: var(--exit-transform);\n transition-delay: var(--start-delay, 0s);\n opacity: 0;\n }\n \n :host(._top) {\n margin-bottom: auto;\n margin-top: 0;\n --dir: -1;\n }\n\n /* ----------- */\n\n .container {\n position: relative;\n\n display: flex;\n align-items: start;\n gap: 0.6rem;\n\n padding-block: 0.8rem;\n padding-inline: 1.2rem;\n border-radius: var(--wq-radius);\n\n color: var(--color-default);\n background-color: var(--background);\n box-shadow: var(--shadow);\n\n anchor-name: --container;\n }\n\n /* ----------- */\n\n :host(:popover-open) {\n display: block;\n opacity: 1;\n transform: none;\n }\n\n @starting-style {\n :host(:popover-open) {\n opacity: 0;\n transform: var(--entry-transform);\n }\n }\n\n /* ----------- */\n\n :host(:not([popover=\"manual\"]):popover-open)::backdrop {\n animation: flash 0.3s ease-in;\n animation-iteration-count: 3;\n }\n\n :host([popover=\"manual\"])::backdrop {\n /* Transition */\n transition:\n display 0.2s allow-discrete,\n overlay 0.2s allow-discrete,\n backdrop-filter 0.2s;\n }\n\n :host([popover=\"manual\"]:popover-open)::backdrop {\n backdrop-filter: blur(3px);\n }\n\n @starting-style {\n :host([popover=\"manual\"]:popover-open)::backdrop {\n backdrop-filter: none;\n }\n }\n \n :host([popover=\"manual\"]:popover-open)::before {\n position: fixed;\n inset: 0;\n display: block;\n content: \"\";\n z-index: -1;\n }\n\n .icon {\n display: none;\n opacity: 0.6;\n }\n\n :host([type=\"info\"]) .icon._info,\n :host([type=\"success\"]) .icon._success,\n :host([type=\"error\"]) .icon._error,\n :host([type=\"warning\"]) .icon._warning {\n display: block;\n }\n \n :host([type=\"info\"]) .container {\n color: var(--color-info);\n }\n \n :host([type=\"success\"]) .container {\n color: var(--color-success);\n }\n\n :host([type=\"error\"]) .container {\n color: var(--color-error);\n }\n\n :host([type=\"warning\"]) .container {\n color: var(--color-warning);\n }\n\n .close-button {\n padding-inline: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n font-size: inherit;\n color: gray;\n cursor: pointer;\n border: none;\n background: none;\n transform: translateX(0.1rem);\n }\n\n :host(:not([popover=\"manual\"])) .close-button {\n display: none;\n }\n\n .close-button:hover {\n opacity: 0.8;\n }\n\n /* ----------- */\n\n :host(:not(._top)) wq-toast {\n position-anchor: --container;\n bottom: calc(anchor(bottom) - 0.5rem);\n }\n\n :host(:not(._top)) wq-toast:hover,\n :host(:not(._top)) .container:hover ~ wq-toast {\n bottom: calc(anchor(top) - 0.75rem);\n transition-delay: 0;\n }\n\n :host(._top) wq-toast {\n position-anchor: --container;\n top: calc(anchor(top) - 0.5rem);\n }\n\n :host(._top) wq-toast:hover,\n :host(._top) .container:hover ~ wq-toast {\n top: calc(anchor(bottom) - 0.75rem);\n transition-delay: 0;\n }\n \n ${this.css}\n </style>`;\n\n this.#addNested();\n }\n}\n\n// ---------------- ModalElement\n\nexport class ModalMinmaxEvent extends Event {\n\n #ratio;\n get ratio() { return this.#ratio; }\n\n constructor(ratio) {\n super('minmax');\n this.#ratio = ratio;\n }\n}\n\nexport class ModalElement extends BaseElement {\n\n static get events() {\n return super.events.concat(['minmax']);\n }\n\n static get observedAttributes() {\n return super.observedAttributes.concat(['class']);\n }\n\n get delegatesFocus() { return false; }\n\n // ----------------\n\n set type(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('type');\n } else this.setAttribute('type', value);\n }\n\n get type() { return this.getAttribute('type'); }\n\n get headerBoxHTML() { return ''; }\n\n get headerHTML() { return ''; }\n\n get headerExtendedHTML() { return ''; }\n\n get mainHTML() { return ''; }\n\n get contentHTML() { return ''; }\n\n get footerHTML() { return ''; }\n\n get css() { return ''; }\n\n #viewElement;\n #sentinelElement;\n #spacingElement;\n #headerElement;\n #headerBoxElement;\n #footerElement;\n\n updateScrollViewDimensions() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n let viewWidth, viewHeight;\n\n const swipeDismiss = this.classList.contains('_swipe-dismiss');\n const minmaxScroll = !!window.getComputedStyle(this).getPropertyValue('--modal-minmax-length');\n\n if (swipeDismiss || minmaxScroll) {\n requestAnimationFrame(() => {\n let left = 0, top = 0;\n if (this.matches('._left._horz, ._top:not(._horz)')) {\n this.#viewElement.scrollTo({ top, left });\n } else {\n if (this.classList.contains('_horz')) {\n viewWidth = this.#viewElement.offsetWidth;\n left = viewWidth - this.#spacingElement.offsetWidth;\n } else {\n viewHeight = this.#viewElement.offsetHeight;\n top = viewHeight - this.#spacingElement.offsetHeight;\n }\n if (this.#viewElement.scrollTop < top || this.#viewElement.scrollLeft < left) {\n this.#viewElement.scrollTo({ top, left });\n }\n }\n });\n }\n\n this.#viewElement.style.setProperty('--header-box-height', this.#headerBoxElement.offsetHeight + 'px');\n this.#viewElement.style.setProperty('--header-max-height', this.#headerElement.offsetHeight + 'px');\n this.#viewElement.style.setProperty('--footer-max-height', this.#footerElement.offsetHeight + 'px');\n\n if (this.classList.contains('_container')) return;\n if (viewWidth === undefined) viewWidth = this.#viewElement.offsetWidth;\n if (viewHeight === undefined) viewHeight = this.#viewElement.offsetHeight;\n\n this.#viewElement.style.setProperty('--view-width', viewWidth + 'px');\n this.#viewElement.style.setProperty('--view-height', viewHeight + 'px');\n });\n });\n }\n\n #unbindMinmaxWorker = null;\n\n bindMinmaxWorker() {\n const swipeDismiss = this.classList.contains('_swipe-dismiss');\n const minmaxEvents = this.classList.contains('_minmax-events');\n\n if (!swipeDismiss && !minmaxEvents) return;\n\n const options = {\n root: this.#viewElement,\n threshold: [0, 1]\n };\n\n const observer = new IntersectionObserver((entries) => {\n if (!this.#userScrolled) return;\n\n for (const entry of entries) {\n // Minmax events\n if (entry.target === this.#spacingElement) {\n const event = new ModalMinmaxEvent(1 - entry.intersectionRatio);\n this.dispatchEvent(event);\n }\n\n // For auto-closing\n if (entry.target === this.#sentinelElement\n && entry.isIntersecting\n && entry.intersectionRatio >= 0.8) {\n this.hidePopover();\n }\n }\n }, options);\n\n setTimeout(() => {\n if (minmaxEvents) observer.observe(this.#spacingElement);\n if (swipeDismiss) observer.observe(this.#sentinelElement);\n }, 200);\n\n this.#unbindMinmaxWorker = () => observer.disconnect();\n }\n\n #userScrolled = false;\n #unbindDimensionsWorker;\n\n #bindDimensionsWorker() {\n this.#userScrolled = false;\n const handleUserScroll = () => this.#userScrolled = true;\n this.#viewElement.addEventListener('scroll', handleUserScroll);\n\n\n this.updateScrollViewDimensions();\n const handleResize = () => this.updateScrollViewDimensions();\n window.addEventListener('resize', handleResize);\n\n this.#unbindDimensionsWorker?.();\n this.#unbindDimensionsWorker = () => {\n window.removeEventListener('resize', handleResize);\n this.#viewElement.removeEventListener('scroll', handleUserScroll);\n };\n }\n\n // ----------------\n\n attributeChangedCallback(name, old, _new) {\n super.attributeChangedCallback?.(name, old, _new);\n\n if (name === 'class') this.#bindDimensionsWorker();\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n\n if (!this.popover) {\n this.popover = 'manual';\n }\n if (this.hasAttribute('open')) {\n this.showPopover();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n\n this.#unbindDimensionsWorker?.();\n this.#unbindDimensionsWorker = null;\n this.#unbindMinmaxWorker?.();\n this.#unbindMinmaxWorker = null;\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open', delegatesFocus: this.delegatesFocus });\n\n this.addEventListener('toggle', (e) => {\n if (e.newState === 'open') {\n this.#bindDimensionsWorker();\n this.bindMinmaxWorker();\n } else if (e.newState === 'closed') {\n this.#unbindDimensionsWorker?.();\n this.#unbindDimensionsWorker = null;\n this.#unbindMinmaxWorker?.();\n this.#unbindMinmaxWorker = null;\n }\n });\n\n this.shadowRoot.innerHTML = `\n <div class=\"spacing\"></div>\n <div class=\"view\" part=\"view\">\n\n <div class=\"sentinel\"></div>\n <div class=\"spacing\"></div>\n\n <div class=\"container\" part=\"container\">\n <header part=\"header\">\n <div class=\"header-box\" part=\"header-box\">\n <slot\n name=\"header-box\"\n onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--header-box-height', this.closest('.header-box').offsetHeight + 'px');\"\n >${this.headerBoxHTML}</slot>\n </div>\n\n <div class=\"header-bar\" part=\"header-bar\">\n <div class=\"header-left\">\n <svg class=\"icon _info\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M444-296h72v-228h-72v228Zm36-312q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm0 528q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _success\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M390-298 246-442l72-72 72 72 252-252 72 72-324 324Zm90 218q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _error\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _warning\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <div class=\"_content\" style=\"flex-grow: 1\">\n <slot\n name=\"header\"\n onslotchange=\"this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');\"\n >${this.headerHTML}</slot>\n </div>\n </div>\n <button class=\"close-button\" part=\"close-button\" onclick=\"this.getRootNode().host.hidePopover();\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n </button>\n </div>\n\n ${this.headerExtendedHTML || `\n <slot\n name=\"header-extended\"\n onslotchange=\"this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');\"\n ></slot>`}\n\n </header>\n\n <div class=\"scrollport-anchor\">\n <div class=\"scrollport\">\n <div class=\"scroll-fold scroll-fold-start\" part=\"scroll-fold scroll-fold-start\"></div>\n <div class=\"scroll-fold scroll-fold-end\" part=\"scroll-fold scroll-fold-end\"></div>\n <div class=\"scrollbar-track\">\n <div class=\"scrollbar-thumb\"></div>\n </div>\n </div>\n </div>\n\n ${this.mainHTML || `<div class=\"main\" part=\"main\">${this.contentHTML || `<slot></slot>`\n }</div>`}\n\n <footer part=\"footer\">\n <div class=\"footer-bar\" part=\"footer-bar\">\n <slot\n name=\"footer\"\n onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-max-height', this.closest('footer').offsetHeight + 'px');\"\n >${this.footerHTML}</slot>\n </div>\n </footer>\n\n </div>\n </div>\n <span class=\"spacing-b\"></span>\n\n <style>\n * {\n box-sizing: border-box;\n }\n\n @keyframes untransform {\n to { transform: none; }\n }\n\n @keyframes transform-n {\n to { transform: var(--transform); }\n }\n\n @keyframes appear {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes disappear {\n from { opacity: 1; }\n to { opacity: 0; }\n }\n\n @keyframes header-chrome {\n from { background: var(--header-open-background); }\n to { background: var(--header-background); }\n }\n\n @keyframes move-scrollbar-thumb {\n from { transform: var(--scrollbar-thumb-start); }\n to { transform: var(--scrollbar-thumb-length); }\n }\n\n @keyframes radius0 {\n to { --wq-radius: 0; }\n }\n\n :host {\n --wq-radius: var(--modal-radius, 1rem);\n --aero-blur: var(--modal-aero-blur, 10px);\n --background: var(--modal-background, rgba(80, 80, 80, 1));\n\n --color-default: var(--modal-color-default, whitesmoke);\n --color-info: var(--modal-color-info, whitesmoke);\n --color-success: var(--modal-color-success, whitesmoke);\n --color-error: var(--modal-color-error, whitesmoke);\n --color-warning: var(--modal-color-warning, whitesmoke);\n\n --header-color-default: var(--modal-header-color-default, var(--color-default));\n --header-color-info: var(--modal-header-color-info, skyblue);\n --header-color-success: var(--modal-header-color-success, lightgreen);\n --header-color-error: var(--modal-header-color-error, coral);\n --header-background: var(--modal-header-background, var(--background));\n\n --header-open-background: var(--modal-header-open-background, var(--header-background));\n\n --footer-color-default: var(--modal-footer-color-default, var(--color-default));\n --footer-color-info: var(--modal-footer-color-info, skyblue);\n --footer-color-success: var(--modal-footer-color-success, lightgreen);\n --footer-color-error: var(--modal-footer-color-error, coral);\n --footer-background: var(--modal-footer-background, var(--background));\n\n --expanse-length: var(--modal-expanse-length, 0px);\n --minmax-length: var(--modal-minmax-length, 0px);\n\n --scrollbar-thumb-color: var(--modal-scrollbar-thumb-color, black);\n --scrollbar-thumb-width: var(--modal-scrollbar-thumb-width, 4px);\n --scrollbar-thumb-height: var(--modal-scrollbar-thumb-height, 30px);\n\n --translation: calc(var(--modal-translation, 50px) * var(--dir));\n --exit-factor: var(--modal-exit-factor, -1);\n }\n\n /* -------- internal, dynamic props (root) -------- */\n\n :host {\n --dir: 1;\n --entry-transform: translateY(var(--translation));\n --exit-transform: translateY(calc(var(--translation) * var(--exit-factor)));\n }\n\n :host(._swipe-dismiss) .view {\n --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-height) - var(--minmax-length)));\n }\n\n :host(._horz._swipe-dismiss) .view {\n --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-width) - var(--minmax-length)));\n }\n \n /* transform reversal */\n\n :host(:is(._top, ._left)) { --dir: -1; }\n\n /* horizontal axis */\n\n :host(:is(._left, ._right, ._horz)) { \n --entry-transform: translateX(var(--translation));\n --exit-transform: translateX(calc(var(--translation) * var(--exit-factor)));\n }\n\n :host(._edge-tight) { --exit-factor: var(--modal-exit-factor, 1); }\n\n /* -------- internal, dynamic props (view) -------- */\n\n .view {\n --header-max-height: 1.6rem;\n --header-box-height: 0px;\n --footer-max-height: 0px;\n\n --header-min-height: calc(var(--header-max-height) - var(--header-box-height));\n --footer-min-height: var(--footer-max-height);\n\n --view-inner-height: calc(var(--view-height) - var(--header-min-height) - var(--footer-min-height));\n --total-minmax-length: var(--minmax-length);\n \n --y-scroll-effect-exclude: var(--total-minmax-length);\n --scrollbar-appear-range: calc(var(--total-minmax-length) - 25px) var(--total-minmax-length);\n \n --scrollbar-progress-range-start: calc(var(--total-minmax-length) + var(--header-box-height));\n --scrollbar-progress-range-end: 100%;\n --scrollbar-progress-range: var(--scrollbar-progress-range-start) var(--scrollbar-progress-range-end);\n\n --scroll-snap-start: start;\n --scroll-snap-end: end;\n\n --radius-top-left: var(--wq-radius);\n --radius-top-right: var(--wq-radius);\n --radius-bottom-left: var(--wq-radius);\n --radius-bottom-right: var(--wq-radius);\n }\n\n :host(._container) .view {\n --view-height: calc(100cqh - var(--expanse-length));\n --view-width: 100cqw;\n }\n\n :host(._container._horz) .view {\n --view-height: 100cqh;\n --view-width: calc(100cqw - var(--expanse-length));\n }\n\n :host(._swipe-dismiss:not(._horz)) .view {\n --total-minmax-length: var(--view-height);\n }\n\n :host(._swipe-dismiss._horz) .view {\n --total-minmax-length: var(--view-width);\n }\n\n /* transform reversal */\n\n :host(:is(._top:not(._horz), ._left._horz)) .view {\n --scroll-snap-start: end;\n --scroll-snap-end: start;\n\n --y-scroll-effect-exclude: 0px;\n --scrollbar-appear-range: -25px 0;\n }\n\n :host(._top:not(._horz)) .view {\n --scrollbar-progress-range-start: var(--header-box-height);\n --scrollbar-progress-range-end: calc(100% - var(--total-minmax-length));\n }\n\n :host(._left._horz) .view {\n --scrollbar-progress-range-start: 0;\n --scrollbar-progress-range-end: calc(100% - var(--total-minmax-length));\n }\n\n /* curves */\n\n :host(._top._edge-tight) .view {\n --radius-top-left: 0px;\n --radius-top-right: 0px;\n }\n\n :host(._bottom._edge-tight) .view {\n --radius-bottom-left: 0px;\n --radius-bottom-right: 0px;\n }\n\n :host(._left._edge-tight) .view {\n --radius-top-left: 0px;\n --radius-bottom-left: 0px;\n }\n\n :host(._right._edge-tight) .view {\n --radius-top-right: 0px;\n --radius-bottom-right: 0px;\n }\n\n /* --------- actual styling -------- */\n\n :host {\n background: none;\n border: none;\n padding: 0;\n\n max-height: 100vh;\n max-width: 100vw;\n \n /* Transition */\n transition:\n opacity 0.2s,\n transform 0.2s,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transition-timing-function: ease-out;\n \n /* Exit state */\n transform: var(--exit-transform);\n opacity: 0;\n }\n \n :host(:not(._horz, ._left, ._right, ._top, ._bottom)) {\n max-width: 800px;\n }\n\n /* edge alignment */\n\n :host(._top) { margin-top: 0; }\n :host(._bottom) { margin-bottom: 0; }\n :host(._left) { margin-left: 0; }\n :host(._right) { margin-right: 0; }\n\n /* flex orientation */\n\n :host,\n .view {\n flex-direction: column;\n align-items: stretch;\n }\n\n :host(._horz),\n :host(._horz) .view {\n flex-direction: row;\n }\n\n :host(:is(._top:not(._horz), ._left._horz)) .view,\n :host(:is(._top:not(._horz), ._left._horz)) .view .container {\n order: -1;\n }\n\n :host(:is(._top:not(._horz), ._left._horz)) .view .sentinel {\n order: 1000;\n }\n\n /* spacing */\n\n :host>.spacing,\n .view>.spacing,\n .view>.sentinel {\n position: relative;\n display: block;\n flex-shrink: 0;\n }\n\n :host(:not(._horz))>.spacing { height: var(--expanse-length); }\n :host(:not(._horz, ._top, ._bottom))>:is(.spacing, .spacing-b) {\n height: calc(var(--expanse-length) / 2);\n flex-shrink: 0;\n }\n\n :host(._horz)>.spacing { width: var(--expanse-length); }\n :host(._horz:not(._left, ._right))>:is(.spacing, .spacing-b) {\n width: calc(var(--expanse-length) / 2);\n flex-shrink: 0;\n }\n\n :host(:not(._horz)) .view>.spacing { height: var(--minmax-length); }\n :host(._horz) .view>.spacing { width: var(--minmax-length); }\n\n :host(:not(._horz)) .view>.sentinel { height: var(--swipe-dismiss-length); }\n :host(._horz) .view>.sentinel { width: var(--swipe-dismiss-length); }\n\n /* ----------- */\n\n .view {\n position: relative;\n flex-grow: 1;\n display: flex;\n\n pointer-events: none;\n\n overflow-y: auto;\n scrollbar-width: none;\n\n border-top-left-radius: var(--radius-top-left);\n border-top-right-radius: var(--radius-top-right);\n border-bottom-left-radius: var(--radius-bottom-left);\n border-bottom-right-radius: var(--radius-bottom-right);\n\n scroll-timeline-name: --view-scroll;\n\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n animation-name: untransform;\n animation-timeline: --view-scroll;\n\n animation-range: 0 var(--total-minmax-length);\n }\n\n :host(:not(._horz, ._top, ._bottom, ._edge-tight._alt-edge-tight)) .view {\n transform: translateY(calc(var(--total-minmax-length) / -2));\n }\n\n :host(._horz:not(._left, ._right, ._edge-tight._alt-edge-tight)) .view {\n transform: translateX(calc(var(--total-minmax-length) / -2));\n }\n\n :host(._edge-tight._alt-edge-tight) .view {\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n animation-name: radius0;\n animation-timeline: --view-scroll;\n\n animation-range: calc(var(--total-minmax-length) - var(--wq-radius)) var(--total-minmax-length);\n }\n\n :host(._horz) .view {\n overflow-y: hidden;\n overflow-x: auto;\n\n scroll-timeline-axis: inline;\n }\n\n .view::-webkit-scrollbar { display: none; }\n\n /* ----------- */\n\n .container {\n position: relative;\n flex-grow: 1;\n\n pointer-events: auto;\n\n display: flex;\n flex-direction: column;\n }\n\n :host(._swipe-dismiss-fadeout) .container {\n animation-timing-function: linear;\n animation-fill-mode: both;\n animation-name: appear;\n animation-timeline: --view-scroll;\n animation-range: 0 var(--swipe-dismiss-length);\n }\n\n :host(._swipe-dismiss-fadeout:is(._top:not(._horz), ._left._horz)) .container {\n animation-name: disappear;\n animation-range: calc(100% - var(--swipe-dismiss-length)) 100%;\n }\n\n /* ------------ */\n \n header {\n position: sticky;\n top: calc(var(--header-box-height) * -1);\n z-index: 2;\n\n display: flex;\n flex-direction: column;\n\n color: var(--header-color-default);\n background: var(--header-background);\n\n border-top-left-radius: var(--radius-top-left);\n border-top-right-radius: var(--radius-top-right);\n\n order: 1;\n }\n\n :host(:not(._horz)) header {\n animation-timing-function: linear;\n animation-fill-mode: both;\n animation-name: header-chrome;\n animation-timeline: --view-scroll;\n animation-range: var(--y-scroll-effect-exclude) calc(var(--y-scroll-effect-exclude) + var(--header-box-height));\n }\n\n :host(._aero) :is(header, .main, footer) {\n backdrop-filter: blur(var(--aero-blur));\n } \n\n .header-box {\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n --transform: translateY(35%);\n\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n animation-name: disappear, transform-n;\n animation-timeline: --view-scroll;\n animation-range: var(--y-scroll-effect-exclude) calc(var(--y-scroll-effect-exclude) + (var(--header-box-height) / 2));\n }\n\n :host(._horz) .header-box {\n display: none;\n }\n\n .header-bar {\n position: relative;\n z-index: 1;\n\n display: flex;\n align-items: start;\n justify-content: space-between;\n }\n\n .header-bar {\n gap: 0.6rem;\n padding-block: 0.8rem;\n padding-inline: 1.2rem;\n }\n\n .header-left {\n display: flex;\n align-items: start;\n gap: 0.6rem;\n\n opacity: 0;\n\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n animation-name: appear;\n animation-timeline: --view-scroll;\n animation-range: calc(var(--y-scroll-effect-exclude) + (var(--header-box-height) / 2)) calc(var(--y-scroll-effect-exclude) + var(--header-box-height));\n }\n\n :host(._horz) .header-left,\n header:not(:has(slot[name=\"header-box\"]:is(.has-slotted, :not(:empty)))) .header-left {\n opacity: 1;\n }\n\n :host([type=\"info\"]) header {\n color: var(--header-color-info);\n }\n \n :host([type=\"success\"]) header {\n color: var(--header-color-success);\n }\n\n :host([type=\"error\"]) header {\n color: var(--header-color-error);\n }\n \n /* ----------- */\n\n footer {\n position: sticky;\n bottom: 0;\n z-index: 1;\n\n border-bottom-left-radius: var(--radius-bottom-left);\n border-bottom-right-radius: var(--radius-bottom-right);\n\n color: var(--footer-color-default);\n background: var(--footer-background);\n\n order: 5;\n }\n\n :host([type=\"info\"]) footer {\n color: var(--footer-color-info);\n }\n \n :host([type=\"success\"]) footer {\n color: var(--footer-color-success);\n }\n\n :host([type=\"error\"]) footer {\n color: var(--footer-color-error);\n }\n\n /* ------------ */\n\n footer .footer-bar {\n position: sticky;\n left: 0;\n right: 0;\n }\n\n /* ----------- */\n\n .view {\n scroll-snap-type: y mandatory;\n }\n\n :host(._horz) .view {\n scroll-snap-type: x mandatory;\n }\n\n .view>.spacing,\n .view>.sentinel {\n scroll-snap-align: var(--scroll-snap-start);\n }\n\n .main {\n flex-grow: 1;\n\n min-width: var(--view-width);\n min-height: var(--view-inner-height);\n\n scroll-margin-top: var(--header-min-height);\n scroll-margin-bottom: var(--footer-min-height);\n scroll-snap-align: var(--scroll-snap-start);\n\n order: 3;\n }\n\n :host(:is(._top, ._left._horz)) .main {\n scroll-snap-align: none;\n }\n\n :host(:is(._top, ._left._horz)) .container {\n scroll-snap-align: var(--scroll-snap-start);\n }\n\n header {\n scroll-snap-align: start;\n }\n\n .header-bar {\n scroll-snap-align: start;\n }\n\n /* ----------- */\n\n .scrollport-anchor {\n order: 2;\n\n position: sticky;\n top: var(--header-min-height);\n bottom: var(--footer-min-height);\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n\n height: 0;\n width: var(--view-width);\n\n z-index: 1;\n }\n\n :host(:is(._left._horz, ._top:not(._horz))) .scrollport-anchor {\n justify-content: end;\n order: 4;\n }\n\n .scrollport {\n position: relative;\n\n height: var(--view-inner-height);\n width: var(--view-width);\n flex-shrink: 0;\n\n pointer-events: none;\n }\n\n :host(._top:not(._horz)) .scrollport {\n height: calc(var(--view-inner-height) - var(--header-box-height));\n }\n\n /* -- scroll unfold -- */\n\n :host(._scroll-unfold) .scrollport {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n }\n\n :host(._scroll-unfold._horz) .scrollport {\n flex-direction: row;\n }\n \n :host(._scroll-unfold) .scrollport .scroll-fold {\n position: sticky;\n opacity: 0;\n\n background: var(--background);\n\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n animation-name: appear;\n animation-timeline: --view-scroll;\n\n animation-range-start: var(--scrollbar-progress-range-start);\n animation-range-end: calc(var(--scrollbar-progress-range-end) + 1px);\n }\n\n :host(._scroll-unfold) .scrollport .scroll-fold-end {\n animation-range-start: calc(var(--scrollbar-progress-range-start) - 1px);\n animation-range-end: var(--scrollbar-progress-range-end);\n }\n\n :host(._scroll-unfold:not(._horz)) .scrollport .scroll-fold {\n top: var(--header-min-height);\n height: 25%;\n\n mask-image: linear-gradient(to bottom, black 0%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);\n }\n\n :host(._scroll-unfold:not(._horz)) .scrollport .scroll-fold-end {\n bottom: var(--footer-min-height);\n top: auto;\n opacity: 1;\n animation-name: disappear;\n transform: scaleY(-1);\n }\n\n :host(._scroll-unfold._horz) .scrollport .scroll-fold {\n left: 0;\n width: 25%;\n\n mask-image: linear-gradient(to right, black 0%, transparent 100%);\n -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);\n }\n\n :host(._scroll-unfold._horz) .scrollport .scroll-fold-end {\n right: 0;\n left: auto;\n opacity: 1;\n animation-name: disappear;\n transform: scaleX(-1);\n }\n\n /* -- scrollbar -- */\n\n :host(._scrollbars) .scrollbar-track {\n position: absolute;\n display: block;\n overflow: hidden;\n\n height: 100%;\n top: 0;\n right: 0;\n padding-inline: 2px;\n\n opacity: 0;\n\n animation: appear linear;\n animation-timeline: --view-scroll;\n animation-range: var(--scrollbar-appear-range);\n animation-fill-mode: forwards;\n }\n\n :host(._scrollbars._horz) .scrollbar-track {\n height: unset;\n width: 100%;\n top: auto;\n bottom: 0;\n padding-inline: 0;\n padding-block: 2px;\n }\n\n :host(._scrollbars) .scrollbar-thumb {\n width: var(--scrollbar-thumb-width);\n height: var(--scrollbar-thumb-height);\n background: var(--scrollbar-thumb-color);\n border-radius: 10px;\n\n --scrollbar-thumb-start: translateY(0);\n --scrollbar-thumb-length: translateY(calc(var(--view-inner-height) - 100%));\n\n animation: move-scrollbar-thumb linear both;\n animation-timeline: --view-scroll;\n animation-range: var(--scrollbar-progress-range);\n }\n\n :host(._scrollbars._horz) .scrollbar-thumb {\n height: var(--scrollbar-thumb-width);\n width: var(--scrollbar-thumb-height);\n\n --scrollbar-thumb-start: translateX(0);\n --scrollbar-thumb-length: translateX(calc(var(--view-width) - 100%));\n }\n\n /* ----------- */\n\n :host(:popover-open) {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n @starting-style {\n :host(:popover-open) {\n opacity: 0;\n transform: var(--entry-transform);\n }\n }\n\n /* ----------- */\n\n :host::backdrop {\n /* Transition */\n transition:\n display 0.2s allow-discrete,\n overlay 0.2s allow-discrete,\n backdrop-filter 0.2s;\n }\n\n :host(._swipe-dismiss._container) {\n timeline-scope: --view-scroll;\n }\n\n :host(._swipe-dismiss._container)::backdrop {\n opacity: 0;\n\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n animation-name: appear;\n animation-timeline: --view-scroll;\n\n animation-range: 0 calc(100cqh - var(--expanse-length) - var(--minmax-length));\n }\n\n :host(._swipe-dismiss._container._horz)::backdrop {\n animation-range: 0 calc(100cqw - var(--expanse-length) - var(--minmax-length));\n }\n\n :host(._swipe-dismiss._container._top:not(._horz))::backdrop,\n :host(._swipe-dismiss._container._left._horz)::backdrop {\n opacity: 1;\n animation-name: disappear;\n }\n\n :host(._swipe-dismiss._container._top:not(._horz))::backdrop {\n animation-range: calc(100% - (100cqh - var(--expanse-length) - var(--minmax-length))) 100%;\n }\n\n :host(._swipe-dismiss._container._left._horz)::backdrop {\n animation-range: calc(100% - (100cqw - var(--expanse-length) - var(--minmax-length))) 100%;\n }\n\n :host(:popover-open)::backdrop {\n backdrop-filter: blur(3px);\n }\n\n :host(:not([popover=\"manual\"]):popover-open)::backdrop {\n backdrop-filter: blur(0px);\n }\n\n @starting-style {\n :host(:popover-open)::backdrop {\n backdrop-filter: none;\n }\n }\n \n :host(:popover-open)::before {\n position: fixed;\n inset: 0;\n display: block;\n content: \"\";\n z-index: -1;\n }\n\n .icon {\n display: none;\n opacity: 0.6;\n }\n\n :host([type=\"info\"]) .icon._info,\n :host([type=\"success\"]) .icon._success,\n :host([type=\"error\"]) .icon._error,\n :host([type=\"warning\"]) .icon._warning {\n display: block;\n }\n\n :host([type=\"info\"]) .container {\n color: var(--color-info);\n }\n \n :host([type=\"success\"]) .container {\n color: var(--color-success);\n }\n\n :host([type=\"error\"]) .container {\n color: var(--color-error);\n }\n\n :host([type=\"warning\"]) .container {\n color: var(--color-warning);\n }\n\n .main {\n color: var(--color-default);\n background: var(--background);\n }\n\n .view:not(:has(footer slot:is(.has-slotted, :not(:empty)))) .main {\n border-bottom-left-radius: var(--radius-bottom-left);\n border-bottom-right-radius: var(--radius-bottom-right);\n }\n\n .close-button {\n padding-inline: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n font-size: inherit;\n color: gray;\n cursor: pointer;\n border: none;\n background: none;\n }\n \n :host(:not([popover=\"manual\"])) {\n pointer-events: none;\n }\n\n :host(:not([popover=\"manual\"])) .close-button {\n display: none;\n }\n\n .close-button:hover {\n opacity: 0.8;\n }\n\n :host(._horz) :is(.header-left, .close-button) {\n position: sticky;\n left: 1.2rem;\n right: 1.2rem;\n }\n \n ${this.css}\n </style>\n `;\n\n this.#viewElement = this.shadowRoot.querySelector('.view');\n this.#sentinelElement = this.#viewElement.querySelector('.sentinel');\n this.#spacingElement = this.#viewElement.querySelector('.spacing');\n this.#headerElement = this.#viewElement.querySelector('header');\n this.#headerBoxElement = this.#viewElement.querySelector('.header-box');\n this.#footerElement = this.#viewElement.querySelector('footer');\n }\n}\n\n// ---------------- DialogElement\n\nexport class DialogResponseEvent extends Event {\n\n #data;\n get data() { return this.#data; }\n\n constructor(data) {\n super('response');\n this.#data = data;\n }\n}\n\nexport class DialogElement extends ModalElement {\n\n static get events() {\n return super.events.concat(['response']);\n }\n\n get delegatesFocus() { return true; }\n\n // ----------------\n\n hidePopover() { this.respondWith(null); }\n\n respondWith(response) {\n const event = new DialogResponseEvent(response);\n super.hidePopover();\n this.dispatchEvent(event);\n }\n\n respondWithData() {\n const data = this.querySelector('form')\n || this.shadowRoot.querySelector('form');\n this.respondWith(data);\n }\n\n render(data = {}) {\n this.type = data.type;\n\n const html = [data.message];\n if (data.actions?.[0]) {\n html.push(`<span slot=\"action-0\">${data.actions[0]}</span>`);\n }\n if (data.actions?.[1]) {\n html.push(`<span slot=\"action-1\">${data.actions[1]}</span>`);\n }\n\n this.innerHTML = html.join('\\n');\n }\n\n get actionTexts() { return ['Cancel', 'Submit']; }\n\n get footerHTML() {\n return ` \n <button\n part=\"action-0\"\n class=\"action _secondary\"\n onclick=\"this.getRootNode().host.hidePopover()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n <slot name=\"action-0\" onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length);\">${this.actionTexts[0]}</slot>\n </button>\n\n <button\n part=\"action-1\"\n class=\"action _primary\"\n onclick=\"this.getRootNode().host.respondWithData()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M369-222 128-463l84-84 157 157 379-379 84 84-463 463Z\"/></svg>\n <slot name=\"action-1\" onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length);\">${this.actionTexts[1]}</slot>\n </button>\n `;\n }\n\n get css() {\n return super.css + `\n :host {\n --primary-button-color: var(--dialog-primary-button-color, black);\n --primary-button-background: var(--dialog-primary-button-background, white);\n --secondary-button-color: var(--dialog-secondary-button-color, white);\n --secondary-button-background: var(--dialog-secondary-button-background, black);\n --button-radius: var(--dialog-button-radius, 10px);\n }\n\n .main {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n }\n\n .footer-bar {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 1rem;\n }\n\n button.action {\n whitespace: nowrap;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border: none;\n border-radius: var(--button-radius);\n padding: 0.5rem 1rem;\n cursor: pointer;\n transition: all 0.2s;\n font-size: inherit;\n font-weight: bold;\n flex-grow: 1;\n }\n\n button.action:hover {\n opacity: 0.8;\n }\n \n button.action:is(:focus, :active, .active) {\n outline: none;\n box-shadow: none;\n opacity: 0.5;\n }\n\n button.action._primary {\n background-color: var(--primary-button-background);\n color: var(--primary-button-color);\n }\n\n button.action._secondary {\n background-color: var(--secondary-button-background);\n color: var(--secondary-button-color);\n }\n\n button.action:not(:has(slot:is(.has-slotted, :not(:empty)))) {\n display: none;\n }\n `;\n }\n}\n\n// ---------------- PromptElement\n\nexport class PromptElement extends DialogElement {\n\n static get observedAttributes() {\n return super.observedAttributes.concat(['value', 'placeholder']);\n }\n\n // ----------------\n\n attributeChangedCallback(name, old, _new) {\n super.attributeChangedCallback?.(name, old, _new);\n\n const input = this.shadowRoot.querySelector('input');\n if (name === 'value') input.value = _new;\n if (name === 'placeholder') input.placeholder = _new;\n }\n\n set placeholder(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('placeholder');\n } else this.setAttribute('placeholder', value);\n }\n\n get placeholder() { return this.getAttribute('placeholder'); }\n\n set value(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('value');\n } else this.setAttribute('value', value);\n }\n\n get value() { return this.getAttribute('value'); }\n\n respondWithData() {\n const data = this.shadowRoot.querySelector('input').value;\n this.respondWith(data);\n }\n\n render(data = {}) {\n this.value = data.value;\n this.placeholder = data.placeholder;\n super.render(data);\n }\n\n get mainHTML() {\n return `\n <form class=\"main\" part=\"main\" onsubmit=\"this.getRootNode().host.respondWithData(); event.preventDefault();\">\n <slot></slot>\n <slot name=\"input\">\n <input part=\"input\" type=\"text\" autocomplete=\"off\" autofocus placeholder=\"Enter response\">\n </slot>\n </form>\n `;\n }\n\n get actionTexts() { return ['Cancel', 'Submit']; }\n\n get css() {\n return super.css + `\n :host {\n --input-color: var(--prompt-input-color, inherit);\n --input-background: var(--prompt-input-background, rgba(255, 255, 255, 0.2));\n --input-radius: var(--prompt-input-radius, 10px);\n }\n\n input {\n width: 100%;\n border: none;\n border-radius: var(--input-radius);\n padding: 0.6rem 1rem;\n color: var(--input-color);\n background-color: var(--input-background);\n }\n\n input::placeholder {\n color: currentColor;\n }\n `;\n }\n}\n\n// ---------------- ConfirmElement\n\nexport class ConfirmElement extends DialogElement {\n get actionTexts() { return ['No', 'Yes']; }\n\n respondWith(response) { super.respondWith(!!response); }\n\n respondWithData() { super.respondWith(true); }\n}\n\n// ---------------- AlertElement\n\nexport class AlertElement extends DialogElement {\n get actionTexts() { return ['', 'Got it']; }\n}\n\n// ---------------- define\n\nexport function defineElements() {\n try {\n CSS.registerProperty({\n name: '--wq-radius',\n syntax: '<length-percentage>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n customElements.define('wq-toast', ToastElement);\n customElements.define('wq-modal', ModalElement);\n customElements.define('wq-dialog', DialogElement);\n customElements.define('wq-prompt', PromptElement);\n customElements.define('wq-confirm', ConfirmElement);\n customElements.define('wq-alert', AlertElement);\n}", "import { defineElements } from '../../src/webflo-runtime/webflo-client/webflo-elements.js';\n\ndefineElements();"],
|
|
5
|
-
"mappings": "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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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",
|
|
6
|
-
"names": ["BaseElement", "e", "#compiledEventHandlers", "#compileAttrEventsIfNeeded", "attrName", "attrValue", "eventName", "#initPropEventsSystem", "_handler", "handler", "name", "old", "_new", "ToastElement", "value", "#childToast", "#addNested", "slot", "n", "content", "context", "childToast", "recursion", "directChildToast", "childStartDelay", "ModalMinmaxEvent", "#ratio", "ratio", "ModalElement", "#viewElement", "#sentinelElement", "#spacingElement", "#headerElement", "#headerBoxElement", "#footerElement", "viewWidth", "viewHeight", "swipeDismiss", "minmaxScroll", "left", "top", "#unbindMinmaxWorker", "minmaxEvents", "options", "observer", "entries", "
|
|
4
|
+
"sourcesContent": ["// ---------------- BaseElement\n\nexport class BaseElement extends HTMLElement {\n\n static get events() {\n return [];\n }\n\n static get observedAttributes() {\n return this.events.map((e) => `on${e}`);\n }\n\n // ----------------\n\n #compiledEventHandlers = {};\n\n #compileAttrEventsIfNeeded(attrName, attrValue) {\n for (const eventName of this.constructor.events) {\n\n if (attrName !== `on${eventName}`) continue;\n\n if (this.#compiledEventHandlers[attrName]) {\n this.removeEventListener(eventName, this.#compiledEventHandlers[attrName]);\n this.#compiledEventHandlers[attrName] = null;\n }\n\n if (attrValue) {\n this.#compiledEventHandlers[attrName] = Function('event', attrValue).bind(this);\n this.addEventListener(eventName, this.#compiledEventHandlers[attrName]);\n }\n }\n }\n\n #initPropEventsSystem() {\n for (const eventName of this.constructor.events) {\n\n const attrName = `on${eventName}`;\n let _handler = null;\n\n Object.defineProperty(this, attrName, {\n get: () => _handler,\n set: (handler) => {\n if (_handler) {\n this.removeEventListener(eventName, _handler);\n _handler = null;\n }\n\n if (typeof handler === 'function') {\n this.addEventListener(eventName, handler);\n } else if (handler !== null && handler !== undefined) {\n throw new Error(`[${attrName}] handler must be null or a function`);\n }\n\n _handler = handler;\n }\n });\n }\n }\n\n // ----------------\n\n attributeChangedCallback(name, old, _new) {\n this.#compileAttrEventsIfNeeded(name, _new);\n }\n\n constructor() {\n super();\n this.#initPropEventsSystem();\n }\n}\n\n// ---------------- ToastElement\n\nexport class ToastElement extends BaseElement {\n\n set type(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('type');\n } else this.setAttribute('type', value);\n }\n\n get type() { return this.getAttribute('type'); }\n\n get contentHTML() { return ''; }\n\n get css() { return ''; }\n\n #childToast = null;\n\n #addNested() {\n if (this.#childToast) {\n this.shadowRoot.appendChild(this.#childToast);\n if (this.matches(':popover-open')) {\n this.#childToast.showPopover();\n }\n }\n }\n\n _processVisibility(slot) {\n if (this.hasAttribute('oncontent')) {\n if (slot.assignedNodes().find((n) => n.nodeName !== '#text' || n.textContent.trim())) {\n this.showPopover();\n } else this.hidePopover();\n }\n }\n\n render({ content, context }, childToast = null, recursion = 1) {\n if (context && recursion > 0) {\n const directChildToast = document.createElement(this.tagName);\n\n directChildToast.setAttribute('popover', this.getAttribute('popover') || 'auto');\n if (this.classList.contains('_top')) {\n directChildToast.classList.add('_top');\n }\n directChildToast.render({ content }, childToast, 0);\n\n this.render(context, directChildToast, recursion + 1);\n return;\n }\n\n this.#childToast?.remove();\n this.#childToast = childToast;\n // In case \"this\" is already connected\n this.#addNested();\n\n const childStartDelay = parseFloat(childToast?.style.getPropertyValue('--start-delay') || '0');\n this.style.setProperty('--start-delay', (childStartDelay + 0.1) + 's');\n\n // Render now\n this.type = content.type;\n this.innerHTML = content.message;\n }\n\n connectedCallback() {\n if (!this.popover) {\n this.popover = 'auto';\n }\n }\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n this.addEventListener('toggle', (e) => {\n if (e.newState === 'open') {\n this.#childToast?.showPopover();\n } else if (e.newState === 'closed') {\n this.#childToast?.hidePopover();\n if (this.getAttribute('oncontent') === 'always') {\n this.innerHTML = '';\n }\n }\n });\n\n this.shadowRoot.innerHTML = `\n <div class=\"container\">\n\n <svg class=\"icon _info\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M444-296h72v-228h-72v228Zm36-312q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm0 528q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _success\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M390-298 246-442l72-72 72 72 252-252 72 72-324 324Zm90 218q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _error\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _warning\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <div class=\"_content\" part=\"content\">\n <slot\n onslotchange=\"this.getRootNode().host?._processVisibility(this);\"\n >${this.contentHTML}</slot>\n </div>\n <button class=\"close-button\" part=\"close-button\" onclick=\"this.getRootNode().host.hidePopover();\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n </button>\n\n </div>\n <style>\n * {\n box-sizing: border-box;\n }\n \n @keyframes flash {\n from {\n background-color: transparent;\n }\n\n 50% {\n background-color: rgba(125, 125, 125, 0.2);\n }\n\n to {\n background-color: transparent;\n }\n }\n\n :host {\n --color-default: var(--toast-color-default, whitesmoke);\n --color-info: var(--toast-color-info, skyblue);\n --color-success: var(--toast-color-success, lightgreen);\n --color-error: var(--toast-color-error, coral);\n --color-warning: var(--toast-color-warning, coral);\n\n --radius: var(--toast-radius, 1rem);\n --background: var(--toast-background, rgb(30, 30, 30));\n --shadow: var(--toast-shadow, rgb(30, 30, 30));\n\n --entry-exit-translation-polarity: 1;\n --translation: calc(var(--toast-translation, 50px) * var(--entry-exit-translation-polarity));\n --exit-translation-polarity: var(--toast--exit-translation-polarity, -1);\n\n --entry-transform: translateY(var(--translation));\n --exit-transform: translateY(calc(var(--translation) * var(--exit-translation-polarity)));\n }\n\n :host {\n border: none;\n background: none;\n\n margin-bottom: 0;\n padding: 1rem;\n\n /* Transition */\n transition:\n opacity 0.2s,\n transform 0.2s,\n bottom 0.1s,\n top 0.1s,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n \n /* Exit state */\n transform: var(--exit-transform);\n transition-delay: var(--start-delay, 0s);\n opacity: 0;\n }\n \n :host(._top) {\n margin-bottom: auto;\n margin-top: 0;\n --entry-exit-translation-polarity: -1;\n }\n\n /* ----------- */\n\n .container {\n position: relative;\n\n display: flex;\n align-items: start;\n gap: 0.6rem;\n\n padding-block: 0.8rem;\n padding-inline: 1.2rem;\n border-radius: var(--radius);\n\n color: var(--color-default);\n background-color: var(--background);\n box-shadow: var(--shadow);\n\n anchor-name: --container;\n }\n\n /* ----------- */\n\n :host(:popover-open) {\n display: block;\n opacity: 1;\n transform: none;\n }\n\n @starting-style {\n :host(:popover-open) {\n opacity: 0;\n transform: var(--entry-transform);\n }\n }\n\n /* ----------- */\n\n :host(:not([popover=\"manual\"], ._manual-dismiss):popover-open)::backdrop {\n animation: flash 0.3s ease-in;\n animation-iteration-count: 3;\n }\n\n :host(:is([popover=\"manual\"], ._manual-dismiss))::backdrop {\n /* Transition */\n transition:\n display 0.2s allow-discrete,\n overlay 0.2s allow-discrete,\n backdrop-filter 0.2s,\n background 0.2s;\n }\n\n :host(:is([popover=\"manual\"], ._manual-dismiss):popover-open)::backdrop {\n backdrop-filter: blur(3px);\n }\n\n @starting-style {\n :host(:is([popover=\"manual\"], ._manual-dismiss):popover-open)::backdrop {\n backdrop-filter: none;\n background: none;\n }\n }\n \n :host(:is([popover=\"manual\"], ._manual-dismiss):popover-open)::before {\n position: fixed;\n inset: 0;\n display: block;\n content: \"\";\n z-index: -1;\n }\n\n .icon {\n display: none;\n opacity: 0.6;\n }\n\n :host([type=\"info\"]) .icon._info,\n :host([type=\"success\"]) .icon._success,\n :host([type=\"error\"]) .icon._error,\n :host([type=\"warning\"]) .icon._warning {\n display: block;\n }\n \n :host([type=\"info\"]) .container {\n color: var(--color-info);\n }\n \n :host([type=\"success\"]) .container {\n color: var(--color-success);\n }\n\n :host([type=\"error\"]) .container {\n color: var(--color-error);\n }\n\n :host([type=\"warning\"]) .container {\n color: var(--color-warning);\n }\n\n .close-button {\n padding-inline: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n font-size: inherit;\n color: gray;\n cursor: pointer;\n border: none;\n background: none;\n transform: translateX(0.1rem);\n }\n\n :host(:not([popover=\"manual\"], ._manual-dismiss)) .close-button {\n display: none;\n }\n\n .close-button:hover {\n opacity: 0.8;\n }\n\n /* ----------- */\n\n :host(:not(._top)) wq-toast {\n position-anchor: --container;\n bottom: calc(anchor(bottom) - 0.5rem);\n }\n\n :host(:not(._top)) wq-toast:hover,\n :host(:not(._top)) .container:hover ~ wq-toast {\n bottom: calc(anchor(top) - 0.75rem);\n transition-delay: 0;\n }\n\n :host(._top) wq-toast {\n position-anchor: --container;\n top: calc(anchor(top) - 0.5rem);\n }\n\n :host(._top) wq-toast:hover,\n :host(._top) .container:hover ~ wq-toast {\n top: calc(anchor(bottom) - 0.75rem);\n transition-delay: 0;\n }\n \n ${this.css}\n </style>`;\n\n this.#addNested();\n }\n}\n\n// ---------------- ModalElement\n\nexport class ModalMinmaxEvent extends Event {\n\n #ratio;\n get ratio() { return this.#ratio; }\n\n constructor(ratio) {\n super('minmax');\n this.#ratio = ratio;\n }\n}\n\nexport class ModalElement extends BaseElement {\n\n static get events() {\n return super.events.concat(['minmax']);\n }\n\n static get observedAttributes() {\n return super.observedAttributes.concat(['class']);\n }\n\n get delegatesFocus() { return false; }\n get autoFocus() { return true; }\n\n // ----------------\n\n set type(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('type');\n } else this.setAttribute('type', value);\n }\n\n get type() { return this.getAttribute('type'); }\n\n get headerBoxHTML() { return ''; }\n\n get headerHTML() { return ''; }\n\n get headerExtendedHTML() { return ''; }\n\n get mainHTML() { return ''; }\n\n get contentHTML() { return ''; }\n\n get footerHTML() { return ''; }\n\n get css() { return ''; }\n\n #viewElement;\n #sentinelElement;\n #spacingElement;\n #headerElement;\n #headerBoxElement;\n #footerElement;\n\n calcViewDimensions() {\n const viewWidth = this.#viewElement.offsetWidth;\n const viewHeight = this.#viewElement.offsetHeight;\n this.style.setProperty('--view-width', viewWidth + 'px');\n this.style.setProperty('--view-height', viewHeight + 'px');\n }\n\n calcHeaderDimensions() {\n this.style.setProperty('--header-box-height', this.#headerBoxElement.offsetHeight + 'px');\n this.style.setProperty('--header-max-height', this.#headerElement.offsetHeight + 'px');\n }\n\n calcFooterDimensions() {\n this.style.setProperty('--footer-max-height', this.#footerElement.offsetHeight + 'px');\n }\n\n calcScrollability() {\n this.style.setProperty('--view-scroll-height', this.#viewElement.scrollHeight + 'px');\n this.style.setProperty('--view-scroll-width', this.#viewElement.scrollWidth + 'px');\n }\n\n updateScrollViewDimensions() {\n requestAnimationFrame(() => {\n const swipeDismiss = this.classList.contains('_swipe-dismiss');\n const minmaxScroll = !!window.getComputedStyle(this).getPropertyValue('--modal-minmax-length');\n\n if (swipeDismiss || minmaxScroll) {\n requestAnimationFrame(() => {\n let left = 0, top = 0;\n if (this.matches('._left._horz, ._top:not(._horz)')) {\n this.#viewElement.scrollTo({ top, left });\n } else {\n if (this.classList.contains('_horz')) {\n left = this.#sentinelElement.offsetWidth;\n } else {\n top = this.#sentinelElement.offsetHeight;\n }\n if (this.#viewElement.scrollTop < top || this.#viewElement.scrollLeft < left) {\n this.#viewElement.scrollTo({ top, left });\n }\n }\n });\n }\n\n this.calcHeaderDimensions();\n this.calcFooterDimensions();\n this.calcScrollability();\n if (this.classList.contains('_container')) return;\n this.calcViewDimensions();\n });\n }\n\n #unbindMinmaxWorker = null;\n\n bindMinmaxWorker() {\n const swipeDismiss = this.classList.contains('_swipe-dismiss');\n const minmaxEvents = this.classList.contains('_minmax-events');\n\n if (!swipeDismiss && !minmaxEvents) return;\n\n const options = {\n root: this.#viewElement,\n threshold: [0, 1]\n };\n\n const observer = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n // Minmax events\n if (entry.target === this.#spacingElement) {\n const event = new ModalMinmaxEvent(1 - entry.intersectionRatio);\n this.dispatchEvent(event);\n }\n\n // For auto-closing\n if (this.#userScrolled\n && entry.target === this.#sentinelElement\n && entry.isIntersecting\n && entry.intersectionRatio >= 0.8) {\n this.hidePopover();\n }\n }\n }, options);\n\n setTimeout(() => {\n if (minmaxEvents) observer.observe(this.#spacingElement);\n if (swipeDismiss) observer.observe(this.#sentinelElement);\n }, 200);\n\n this.#unbindMinmaxWorker = () => observer.disconnect();\n }\n\n #userScrolled = false;\n #unbindDimensionsWorker;\n\n #bindDimensionsWorker() {\n this.#userScrolled = false;\n const handleUserScroll = () => this.#userScrolled = true;\n this.#viewElement.addEventListener('scroll', handleUserScroll);\n\n this.updateScrollViewDimensions();\n const handleResize = () => this.updateScrollViewDimensions();\n window.addEventListener('resize', handleResize);\n\n this.#unbindDimensionsWorker?.();\n this.#unbindDimensionsWorker = () => {\n window.removeEventListener('resize', handleResize);\n this.#viewElement.removeEventListener('scroll', handleUserScroll);\n };\n }\n\n // ----------------\n\n attributeChangedCallback(name, old, _new) {\n super.attributeChangedCallback?.(name, old, _new);\n\n if (name === 'class' && old !== _new) this.#bindDimensionsWorker();\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n\n if (!this.popover) {\n this.popover = 'manual';\n }\n if (this.hasAttribute('open')) {\n this.showPopover();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n\n this.#unbindDimensionsWorker?.();\n this.#unbindDimensionsWorker = null;\n this.#unbindMinmaxWorker?.();\n this.#unbindMinmaxWorker = null;\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open', delegatesFocus: this.delegatesFocus });\n\n this.addEventListener('toggle', (e) => {\n if (e.newState === 'open') {\n\n // Hack for chrome to force animation rebind on each open phase\n const isBlink =\n CSS.supports('selector(:has(*))') &&\n 'chrome' in globalThis &&\n !('safari' in globalThis);\n if (isBlink) {\n this.style.animation = 'none';\n this.offsetHeight; // force style + layout flush\n this.style.animation = '';\n }\n\n this.#bindDimensionsWorker();\n this.bindMinmaxWorker();\n\n if (!this.delegatesFocus && this.autoFocus\n && !this.querySelector('[autofocus]')) {\n this.shadowRoot.querySelector('[autofocus]')?.focus();\n }\n } else if (e.newState === 'closed') {\n this.#unbindDimensionsWorker?.();\n this.#unbindDimensionsWorker = null;\n this.#unbindMinmaxWorker?.();\n this.#unbindMinmaxWorker = null;\n }\n });\n\n this.shadowRoot.innerHTML = `\n <div class=\"spacing\"></div>\n <div class=\"view\" part=\"view\">\n\n <div class=\"sentinel\"></div>\n <div class=\"spacing\"></div>\n\n <div class=\"container\" part=\"container\">\n <header part=\"header\">\n <div class=\"header-box\" part=\"header-box\">\n <slot\n name=\"header-box\"\n onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length); this.getRootNode().host.calcHeaderDimensions();\"\n >${this.headerBoxHTML}</slot>\n </div>\n\n <div class=\"header-bar\" part=\"header-bar\">\n <div class=\"header-left\">\n <svg class=\"icon _info\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M444-296h72v-228h-72v228Zm36-312q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm0 528q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _success\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M390-298 246-442l72-72 72 72 252-252 72 72-324 324Zm90 218q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _error\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <svg class=\"icon _warning\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n <div class=\"_content\" style=\"flex-grow: 1\">\n <slot\n name=\"header\"\n onslotchange=\"this.getRootNode().host.calcHeaderDimensions();\"\n >${this.headerHTML}</slot>\n </div>\n </div>\n <button class=\"close-button\" part=\"close-button\" onclick=\"this.getRootNode().host.hidePopover();\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n </button>\n </div>\n\n ${this.headerExtendedHTML || `\n <slot\n name=\"header-extended\"\n onslotchange=\"this.getRootNode().host.calcHeaderDimensions();\"\n ></slot>`}\n\n </header>\n\n <div class=\"scrollport-anchor\">\n <div class=\"scrollport\">\n <div class=\"scroll-fold scroll-fold-start\" part=\"scroll-fold scroll-fold-start\"></div>\n <div class=\"scroll-fold scroll-fold-end\" part=\"scroll-fold scroll-fold-end\"></div>\n <div class=\"scrollbar-track\">\n <div class=\"scrollbar-thumb\"></div>\n </div>\n </div>\n </div>\n\n ${this.mainHTML || `<div class=\"main\" part=\"main\">${this.contentHTML || `\n <slot onslotchange=\"this.getRootNode().host.calcScrollability();\"></slot>`\n }</div>`}\n\n <footer part=\"footer\">\n <div class=\"footer-bar\" part=\"footer-bar\">\n <slot\n name=\"footer\"\n onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length); this.getRootNode().host.calcFooterDimensions();\"\n >${this.footerHTML}</slot>\n </div>\n </footer>\n\n </div>\n </div>\n <span class=\"spacing-b\"></span>\n\n <style>\n /*\n * Start: resets\n */\n\n * {\n box-sizing: border-box;\n }\n\n /*\n * End: resets\n * Start: general vars\n */\n\n :host {\n --aero-blur: var(--modal-aero-blur, 10px);\n --backdrop-filter: var(--modal-backdrop-filter, blur(3px));\n \n --radius-length: var(--modal-radius, 1rem);\n\n --background: var(--modal-background, rgba(80, 80, 80, 1));\n\n --background-accent: var(--modal-background-accent, var(--background));\n --color-accent: var(--modal-color-accent, var(--color-default));\n\n --color-default: var(--modal-color-default, whitesmoke);\n --color-info: var(--modal-color-info, whitesmoke);\n --color-success: var(--modal-color-success, whitesmoke);\n --color-error: var(--modal-color-error, whitesmoke);\n --color-warning: var(--modal-color-warning, whitesmoke);\n\n --header-color-default: var(--modal-header-color-default, var(--color-default));\n --header-color-info: var(--modal-header-color-info, skyblue);\n --header-color-success: var(--modal-header-color-success, lightgreen);\n --header-color-error: var(--modal-header-color-error, coral);\n --header-background: var(--modal-header-background, var(--background));\n\n --header-open-background: var(--modal-header-open-background, var(--header-background));\n\n --footer-color-default: var(--modal-footer-color-default, var(--color-default));\n --footer-color-info: var(--modal-footer-color-info, skyblue);\n --footer-color-success: var(--modal-footer-color-success, lightgreen);\n --footer-color-error: var(--modal-footer-color-error, coral);\n --footer-background: var(--modal-footer-background, var(--background));\n\n --close-button-color: var(--modal-close-button-color, var(--color-default));\n\n --expanse-length: var(--modal-expanse-length, 0px);\n --minmax-length: var(--modal-minmax-length, 0px);\n\n --scrollbar-thumb-color: var(--modal-scrollbar-thumb-color, black);\n --scrollbar-thumb-width: var(--modal-scrollbar-thumb-width, 4px);\n --scrollbar-thumb-height: var(--modal-scrollbar-thumb-height, 30px);\n\n --entry-exit-translation: calc(var(--modal-translation, 50px) * var(--entry-exit-translation-polarity));\n --exit-translation-polarity: var(--modal-exit-translation-polarity, -1);\n\n /* -------- box lengths -------- */\n\n --header-max-height: 1.6rem;\n --header-box-height: 0px;\n --footer-max-height: 0px;\n\n --header-min-height: calc(var(--header-max-height) - var(--header-box-height));\n --footer-min-height: var(--footer-max-height);\n\n --view-inner-height: calc(var(--view-height) - var(--header-min-height) - var(--footer-min-height));\n \n --total-minmax-length: calc(var(--minmax-length) + var(--swipe-dismiss-length, 0));\n }\n\n :host(._container:not(._horz)) {\n --view-height: calc(100cqh - var(--expanse-length));\n --view-width: 100cqw;\n }\n\n :host(._container._horz) {\n --view-height: 100cqh;\n --view-width: calc(100cqw - var(--expanse-length));\n }\n\n /*\n * End: general vars\n * Start: entry/exit transition\n */\n\n :host { --entry-exit-translation-polarity: 1; }\n :host(:is(._top, ._left)) { --entry-exit-translation-polarity: -1; }\n :host(._edge-tight) { --exit-translation-polarity: var(--modal-exit-translation-polarity, 1); }\n :host(:not([popover=\"manual\"], ._manual-dismiss):popover-open) { --backdrop-filter: blur(0px); }\n \n :host {\n --entry-transform: translateY(var(--entry-exit-translation));\n --exit-transform: translateY(calc(var(--entry-exit-translation) * var(--exit-translation-polarity)));\n }\n\n :host(:is(._left, ._right, ._horz)) { \n --entry-transform: translateX(var(--entry-exit-translation));\n --exit-transform: translateX(calc(var(--entry-exit-translation) * var(--exit-translation-polarity)));\n }\n\n /* ----------- */\n\n :host {\n transition:\n opacity 0.2s,\n transform 0.2s,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transition-timing-function: ease-out;\n \n transform: var(--exit-transform);\n opacity: 0;\n }\n\n :host(:popover-open) {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n @starting-style {\n :host(:popover-open) {\n opacity: 0;\n transform: var(--entry-transform);\n }\n }\n\n /* ----------- */\n\n :host::backdrop {\n transition:\n display 0.2s allow-discrete,\n overlay 0.2s allow-discrete,\n backdrop-filter 0.2s,\n background 0.2s;\n }\n\n :host(:popover-open)::backdrop {\n backdrop-filter: var(--backdrop-filter);\n }\n\n @starting-style {\n :host(:popover-open)::backdrop {\n backdrop-filter: none;\n background: none;\n }\n }\n\n :host(:not([popover=\"manual\"], ._manual-dismiss):popover-open)::backdrop {\n backdrop-filter: blur(0px);\n }\n\n /*\n * End: entry/exit transition\n * Start: scroll-driven animations\n */\n\n @keyframes radius-progress {\n from { --wq-internal-var-radius-progress: 0; }\n to { --wq-internal-var-radius-progress: 1; }\n }\n\n @keyframes header-box-progress {\n from { --wq-internal-var-header-box-progress: 0; }\n to { --wq-internal-var-header-box-progress: 1; }\n }\n\n @keyframes header-box-progress-a {\n from { --wq-internal-var-header-box-progress-a: 0; }\n to { --wq-internal-var-header-box-progress-a: 1; }\n }\n\n @keyframes header-box-progress-b {\n from { --wq-internal-var-header-box-progress-b: 0; }\n to { --wq-internal-var-header-box-progress-b: 1; }\n }\n\n @keyframes minmax-progress {\n from { --wq-internal-var-minmax-progress: 0; }\n to { --wq-internal-var-minmax-progress: 1; }\n }\n\n @keyframes minmax-progress-a {\n from { --wq-internal-var-minmax-progress-a: 0; }\n to { --wq-internal-var-minmax-progress-a: 1; }\n }\n\n @keyframes minmax-progress-b {\n from { --wq-internal-var-minmax-progress-b: 0; }\n to { --wq-internal-var-minmax-progress-b: 1; }\n }\n\n @keyframes total-minmax-progress {\n from { --wq-internal-var-total-minmax-progress: 0; }\n to { --wq-internal-var-total-minmax-progress: 1; }\n }\n\n @keyframes swipe-dismiss-progress {\n from { --wq-internal-var-swipe-dismiss-progress: 0; }\n to { --wq-internal-var-swipe-dismiss-progress: 1; }\n }\n\n @keyframes scrollbar-appear-progress {\n from { --wq-internal-var-scrollbar-appear-progress: 0; }\n to { --wq-internal-var-scrollbar-appear-progress: 1; }\n }\n\n @keyframes scrollbar-progress {\n from { --wq-internal-var-scrollbar-progress: 0; }\n to { --wq-internal-var-scrollbar-progress: 1; }\n }\n\n @keyframes scrollbar-progress-a {\n from { --wq-internal-var-scrollbar-progress-a: 0; }\n to { --wq-internal-var-scrollbar-progress-a: 1; }\n }\n\n @keyframes scrollbar-progress-b {\n from { --wq-internal-var-scrollbar-progress-b: 0; }\n to { --wq-internal-var-scrollbar-progress-b: 1; }\n }\n\n :host {\n timeline-scope: --view-scroll;\n animation-timeline: --view-scroll;\n\n animation-timing-function: linear;\n animation-fill-mode: both;\n \n animation-name:\n radius-progress,\n header-box-progress,\n header-box-progress-a,\n header-box-progress-b,\n minmax-progress,\n minmax-progress-a,\n minmax-progress-b,\n total-minmax-progress,\n swipe-dismiss-progress,\n scrollbar-appear-progress,\n scrollbar-progress,\n scrollbar-progress-a,\n scrollbar-progress-b;\n\n animation-range:\n var(--radius-progress-range, 0 0),\n var(--header-box-progress-range, 0 0),\n var(--header-box-progress-range-a, 0 0),\n var(--header-box-progress-range-b, 0 0),\n var(--minmax-progress-range, 0 0),\n var(--minmax-progress-range-a, 0 0),\n var(--minmax-progress-range-b, 0 0),\n var(--total-minmax-progress-range, 0 0),\n var(--swipe-dismiss-progress-range, 0 0),\n var(--scrollbar-appear-range, 0 0),\n var(--scrollbar-progress-range, 0 0),\n var(--scrollbar-progress-range-a, 0 0),\n var(--scrollbar-progress-range-b, 0 0);\n\n animation-direction:\n var(--radius-progress-direction, normal),\n var(--header-box-progress-direction, normal),\n var(--header-box-progress-direction-a, normal),\n var(--header-box-progress-direction-b, normal),\n var(--minmax-progress-direction, normal),\n var(--minmax-progress-direction-a, normal),\n var(--minmax-progress-direction-b, normal),\n var(--total-minmax-progress-direction, normal),\n var(--swipe-dismiss-progress-direction, normal),\n var(--scrollbar-appear-direction, normal),\n var(--scrollbar-progress-direction, normal),\n var(--scrollbar-progress-direction-a, normal),\n var(--scrollbar-progress-direction-b, normal);\n }\n\n /* ----------- radius ----------- */\n\n :host(._edge-tight._alt-edge-tight:not(._top:not(._horz), ._left._horz)) {\n --radius-progress-range:\n calc(var(--total-minmax-length) - var(--radius-length))\n var(--total-minmax-length);\n }\n\n :host(._edge-tight._alt-edge-tight:is(._top:not(._horz), ._left._horz)) {\n --radius-progress-range:\n calc(100% - var(--total-minmax-length))\n calc(100% - (var(--total-minmax-length) - var(--radius-length)));\n --radius-progress-direction: reverse;\n }\n\n :host(._edge-tight._alt-edge-tight) {\n --effective-radius: calc(var(--radius-length) * (1 - var(--wq-internal-var-radius-progress)));\n }\n\n :host(:not(._edge-tight._alt-edge-tight)) {\n --effective-radius: var(--radius-length);\n }\n\n :host {\n --effective-top-left-radius: var(--effective-radius);\n --effective-top-right-radius: var(--effective-radius);\n --effective-bottom-left-radius: var(--effective-radius);\n --effective-bottom-right-radius: var(--effective-radius);\n }\n\n :host(._top._edge-tight) {\n --effective-top-left-radius: 0px;\n --effective-top-right-radius: 0px;\n }\n\n :host(._bottom._edge-tight) {\n --effective-bottom-left-radius: 0px;\n --effective-bottom-right-radius: 0px;\n }\n\n :host(._left._edge-tight) {\n --effective-top-left-radius: 0px;\n --effective-bottom-left-radius: 0px;\n }\n\n :host(._right._edge-tight) {\n --effective-top-right-radius: 0px;\n --effective-bottom-right-radius: 0px;\n }\n\n .view {\n border-top-left-radius: var(--effective-top-left-radius);\n border-top-right-radius: var(--effective-top-right-radius);\n border-bottom-left-radius: var(--effective-bottom-left-radius);\n border-bottom-right-radius: var(--effective-bottom-right-radius);\n }\n\n header {\n border-top-left-radius: var(--effective-top-left-radius);\n border-top-right-radius: var(--effective-top-right-radius);\n }\n\n .view:not(:has(footer slot:is(.has-slotted, :not(:empty)))) .main {\n border-bottom-left-radius: var(--effective-bottom-left-radius);\n border-bottom-right-radius: var(--effective-bottom-right-radius);\n }\n\n footer {\n border-bottom-left-radius: var(--effective-bottom-left-radius);\n border-bottom-right-radius: var(--effective-bottom-right-radius);\n }\n\n /* ----------- minmax ----------- */\n\n :host {\n --minmax-progress-range: var(--minmax-progress-range-start) var(--minmax-progress-range-end);\n --minmax-progress-range-start: 0%;\n --minmax-progress-range-end: var(--minmax-length);\n\n --minmax-progress-range-a: var(--minmax-progress-range-a-start) var(--minmax-progress-range-a-end);\n --minmax-progress-range-a-start: var(--minmax-progress-range-start);\n --minmax-progress-range-a-end: calc(var(--minmax-progress-range-start) + (var(--minmax-progress-range-end) - var(--minmax-progress-range-start)) / 2);\n\n --minmax-progress-range-b: var(--minmax-progress-range-b-start) var(--minmax-progress-range-b-end);\n --minmax-progress-range-b-start: calc(var(--minmax-progress-range-start) + (var(--minmax-progress-range-end) - var(--minmax-progress-range-start)) / 2);\n --minmax-progress-range-b-end: var(--minmax-progress-range-end);\n\n --total-minmax-progress-range: var(--total-minmax-progress-range-start) var(--total-minmax-progress-range-end);\n --total-minmax-progress-range-start: 0%;\n --total-minmax-progress-range-end: var(--total-minmax-length);\n }\n \n :host(:is(._top:not(._horz), ._left._horz)) {\n --minmax-progress-range-start: calc(100% - var(--minmax-length));\n --minmax-progress-range-end: 100%;\n\n --total-minmax-progress-range-start: calc(100% - var(--total-minmax-length));\n --total-minmax-progress-range-end: 100%;\n }\n\n :host {\n --effective-minmax-balance-offset: calc(var(--total-minmax-length) / -2 * (1 - var(--wq-internal-var-total-minmax-progress)));\n }\n\n :host(:not(._horz, ._top, ._bottom)) .view {\n transform: translateY(var(--effective-minmax-balance-offset));\n }\n\n :host(._horz:not(._left, ._right)) .view {\n transform: translateX(var(--effective-minmax-balance-offset));\n }\n\n /* ----------- swipe-dismiss ----------- */\n \n :host(._swipe-dismiss:not(._horz)) {\n --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-height) - var(--minmax-length)));\n }\n\n :host(._swipe-dismiss._horz) {\n --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-width) - var(--minmax-length)));\n }\n\n :host(._swipe-dismiss:not(._top:not(._horz), ._left._horz)) {\n --swipe-dismiss-progress-range: 0% var(--swipe-dismiss-length);\n }\n\n :host(._swipe-dismiss:is(._top:not(._horz), ._left._horz)) {\n --swipe-dismiss-progress-range:\n calc(100% - var(--swipe-dismiss-length))\n 100%;\n --swipe-dismiss-progress-direction: reverse;\n }\n\n :host(._swipe-dismiss) {\n --effective-swipe-dismiss-opacity: calc(1 * var(--wq-internal-var-swipe-dismiss-progress));\n }\n\n :host(._swipe-dismiss)::backdrop,\n :host(._swipe-dismiss._swipe-dismiss-fadeout) .view {\n opacity: var(--effective-swipe-dismiss-opacity);\n }\n\n /* ----------- header-box ----------- */\n\n :host(:not(._horz)) {\n --header-box-progress-range:\n var(--total-minmax-length)\n calc(var(--total-minmax-length) + var(--header-box-height));\n\n --header-box-progress-range-a:\n var(--total-minmax-length)\n calc(var(--total-minmax-length) + (var(--header-box-height) / 2));\n\n --header-box-progress-range-b:\n calc(var(--total-minmax-length) + (var(--header-box-height) / 2))\n calc(var(--total-minmax-length) + var(--header-box-height));\n\n --effective-header-box-progress-transform: translateY(calc(35% * var(--wq-internal-var-header-box-progress-a)));\n --effective-header-box-progress-a-opacity: calc(1 * (1 - var(--wq-internal-var-header-box-progress-a)));\n --effective-header-box-progress-b-opacity: calc(1 * var(--wq-internal-var-header-box-progress-b));\n\n .header-box {\n transform: var(--effective-header-box-progress-transform);\n opacity: var(--effective-header-box-progress-a-opacity);\n }\n \n .header-left {\n opacity: var(--effective-header-box-progress-b-opacity);\n }\n }\n\n /* ----------- scrollbars and scroll-unfold ----------- */\n\n :host(:is(._scrollbars, ._scroll-unfold, ._horz)) {\n --scrollable-length: calc(var(--view-scroll-width) - var(--total-minmax-length) - var(--view-width));\n }\n\n :host(:is(._scrollbars, ._scroll-unfold):not(._horz)) {\n --scrollable-length: calc(var(--view-scroll-height) - var(--total-minmax-length) - var(--header-box-height) - var(--view-height));\n }\n\n :host(:is(._scrollbars, ._scroll-unfold)) {\n --scrollability: calc(1 * min(1, calc(var(--scrollable-length) / 1px)));\n\n .scrollport {\n opacity: var(--scrollability);\n }\n }\n\n :host {\n --scrollbar-appear-range: var(--scrollbar-appear-range-start) var(--scrollbar-appear-range-end);\n --scrollbar-appear-range-start: calc(var(--total-minmax-length) - 25px);\n --scrollbar-appear-range-end: var(--total-minmax-length);\n\n --scrollbar-progress-range: var(--scrollbar-progress-range-start) var(--scrollbar-progress-range-end);\n --scrollbar-progress-range-start: var(--total-minmax-length);\n --scrollbar-progress-range-end: 100%;\n\n --scrollbar-progress-range-a: var(--scrollbar-progress-range-a-start) var(--scrollbar-progress-range-a-end);\n --scrollbar-progress-range-a-start: var(--scrollbar-progress-range-start);\n --scrollbar-progress-range-a-end: calc(var(--scrollbar-progress-range-start) + (var(--scrollbar-progress-range-end) - var(--scrollbar-progress-range-start)) / 2);\n\n --scrollbar-progress-range-b: var(--scrollbar-progress-range-b-start) var(--scrollbar-progress-range-b-end);\n --scrollbar-progress-range-b-start: calc(var(--scrollbar-progress-range-start) + (var(--scrollbar-progress-range-end) - var(--scrollbar-progress-range-start)) / 2);\n --scrollbar-progress-range-b-end: var(--scrollbar-progress-range-end);\n }\n\n :host(:not(._horz)) {\n --scrollbar-progress-range-start: calc(var(--total-minmax-length) + var(--header-box-height));\n }\n\n :host(._top:not(._horz)) {\n --scrollbar-appear-range-start: -25px;\n --scrollbar-appear-range-end: 0%;\n\n --scrollbar-progress-range-start: var(--header-box-height);\n --scrollbar-progress-range-end: calc(100% - var(--total-minmax-length));\n }\n\n :host(._left._horz) {\n --scrollbar-appear-range-start: -25px;\n --scrollbar-appear-range-end: 0%;\n\n --scrollbar-progress-range-start: 0%;\n --scrollbar-progress-range-end: calc(100% - var(--total-minmax-length));\n }\n\n :host(._scrollbars) {\n --effective-scrollbar-appear-opacity: calc(1 * var(--wq-internal-var-scrollbar-appear-progress));\n\n .scrollbar-track {\n opacity: var(--effective-scrollbar-appear-opacity);\n }\n }\n\n :host(._scrollbars:not(._horz)) {\n --effective-scrollbar-progress: calc((var(--view-inner-height) - 100%) * var(--wq-internal-var-scrollbar-progress));\n\n .scrollbar-thumb {\n transform: translateY(var(--effective-scrollbar-progress));\n }\n }\n\n :host(._scrollbars._horz) {\n --effective-scrollbar-progress: calc((var(--view-width) - 100%) * var(--wq-internal-var-scrollbar-progress));\n\n .scrollbar-thumb {\n transform: translateX(var(--effective-scrollbar-progress));\n }\n }\n\n :host(._scroll-unfold) {\n --effective-scroll-unfold-a-opacity: calc(1 * var(--wq-internal-var-scrollbar-progress-b));\n --effective-scroll-unfold-b-opacity: calc(1 * (1 - var(--wq-internal-var-scrollbar-progress-a)));\n\n .scroll-fold-start {\n opacity: var(--effective-scroll-unfold-a-opacity);\n }\n\n .scroll-fold-end {\n opacity: var(--effective-scroll-unfold-b-opacity);\n }\n }\n\n /*\n * End: scroll-driven animations\n * Start: actual styling\n */\n\n /* ----------- anchoring, direction, ordering ----------- */\n\n /* anchoring */\n\n :host(._top) { margin-top: 0; }\n :host(._bottom) { margin-bottom: 0; }\n :host(._left) { margin-left: 0; }\n :host(._right) { margin-right: 0; }\n\n /* direction */\n\n :host,\n .view {\n flex-direction: column;\n align-items: stretch;\n }\n\n :host(._horz),\n :host(._horz) .view {\n flex-direction: row;\n }\n\n /* ordering */\n\n header { order: 1; }\n .scrollport-anchor { order: 2; justify-content: start; }\n .main { order: 3; }\n footer { order: 5; }\n\n :host(:is(._top:not(._horz), ._left._horz)) {\n .view,\n .container {\n order: -1;\n }\n\n .sentinel {\n order: 1000;\n }\n\n .scrollport-anchor {\n order: 4;\n justify-content: end;\n }\n }\n\n /* ----------- spacing ----------- */\n\n :host>.spacing,\n .view>.spacing,\n .view>.sentinel {\n position: relative;\n display: block;\n flex-shrink: 0;\n }\n\n :host(:not(._horz))>.spacing { height: var(--expanse-length); }\n :host(:not(._horz, ._top, ._bottom))>:is(.spacing, .spacing-b) {\n height: calc(var(--expanse-length) / 2);\n flex-shrink: 0;\n }\n\n :host(._horz)>.spacing { width: var(--expanse-length); }\n :host(._horz:not(._left, ._right))>:is(.spacing, .spacing-b) {\n width: calc(var(--expanse-length) / 2);\n flex-shrink: 0;\n }\n\n :host(:not(._horz)) .view>.spacing { height: var(--minmax-length); }\n :host(._horz) .view>.spacing { width: var(--minmax-length); }\n\n :host(:not(._horz)) .view>.sentinel { height: var(--swipe-dismiss-length); }\n :host(._horz) .view>.sentinel { width: var(--swipe-dismiss-length); }\n \n /* ----------- scroll-snapping ----------- */\n\n :host(:not(._top:not(._horz), ._left._horz)) .view {\n --scroll-snap-start: start;\n --scroll-snap-end: end;\n }\n\n :host(:is(._top:not(._horz), ._left._horz)) .view {\n --scroll-snap-start: end;\n --scroll-snap-end: start;\n }\n\n .view {\n scroll-snap-type: y mandatory;\n }\n\n :host(._horz) .view {\n scroll-snap-type: x mandatory;\n }\n\n .view>.spacing,\n .view>.sentinel {\n scroll-snap-align: var(--scroll-snap-start);\n }\n\n .main {\n scroll-margin-top: var(--header-min-height);\n scroll-margin-bottom: var(--footer-min-height);\n scroll-snap-align: var(--scroll-snap-start);\n }\n\n :host(:is(._top, ._left._horz)) .main {\n scroll-snap-align: none;\n }\n\n :host(:is(._top, ._left._horz)) .container {\n scroll-snap-align: var(--scroll-snap-start);\n }\n\n header {\n scroll-snap-align: start;\n }\n\n .header-bar {\n scroll-snap-align: start;\n }\n\n /* ----------- elements ----------- */\n\n :host {\n background: none;\n border: none;\n padding: 0;\n\n max-height: 100vh;\n max-width: 100vw;\n }\n \n :host(:not(._horz, ._left, ._right, ._top, ._bottom)) {\n max-width: 800px;\n }\n\n /* view */\n \n .view {\n position: relative;\n flex-grow: 1;\n display: flex;\n\n pointer-events: none;\n\n scroll-timeline-name: --view-scroll;\n \n overflow-y: auto;\n scrollbar-width: none;\n }\n\n :host(._horz) .view {\n overflow-y: hidden;\n overflow-x: auto;\n\n scroll-timeline-axis: inline;\n }\n\n .view::-webkit-scrollbar { display: none; }\n\n /* container */\n\n .container {\n position: relative;\n flex-grow: 1;\n\n pointer-events: auto;\n\n display: flex;\n flex-direction: column;\n }\n\n /* main */\n\n .main {\n flex-grow: 1;\n\n min-width: var(--view-width);\n min-height: var(--view-inner-height);\n }\n\n /* header */\n\n header {\n position: sticky;\n top: calc(var(--header-box-height) * -1);\n\n display: flex;\n flex-direction: column;\n\n color: var(--header-color-default);\n background: var(--header-background);\n\n z-index: 2;\n }\n\n .header-box {\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :host(._horz) .header-box {\n display: none;\n }\n\n .header-bar {\n position: relative;\n\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: 0.6rem;\n\n padding-block: 0.8rem;\n padding-inline: 1.2rem;\n\n z-index: 1;\n }\n\n .header-left {\n display: flex;\n align-items: start;\n gap: 0.6rem;\n }\n\n :host(._horz) .header-left,\n header:not(:has(slot[name=\"header-box\"]:is(.has-slotted, :not(:empty)))) .header-left {\n opacity: 1 !important;\n }\n\n /* footer */\n\n footer {\n position: sticky;\n bottom: 0;\n\n color: var(--footer-color-default);\n background: var(--footer-background);\n\n z-index: 1;\n }\n \n footer .footer-bar {\n position: sticky;\n left: 0;\n right: 0;\n }\n \n /* scrollport */\n\n .scrollport-anchor {\n position: sticky;\n top: var(--header-min-height);\n bottom: var(--footer-min-height);\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n\n height: 0;\n width: var(--view-width);\n\n z-index: 1;\n }\n\n .scrollport {\n position: relative;\n\n height: var(--view-inner-height);\n width: var(--view-width);\n flex-shrink: 0;\n\n pointer-events: none;\n }\n\n :host(._top:not(._horz)) .scrollport {\n height: calc(var(--view-inner-height) - var(--header-box-height));\n }\n\n /* -- scrollbars -- */\n\n .scrollbar-track {\n display: none;\n }\n\n :host(._scrollbars) .scrollbar-track {\n position: absolute;\n display: block;\n overflow: hidden;\n\n height: 100%;\n top: 0;\n right: 0;\n padding-inline: 2px;\n }\n\n :host(._scrollbars._horz) .scrollbar-track {\n height: unset;\n width: 100%;\n top: auto;\n bottom: 0;\n padding-inline: 0;\n padding-block: 2px;\n }\n\n :host(._scrollbars) .scrollbar-thumb {\n width: var(--scrollbar-thumb-width);\n height: var(--scrollbar-thumb-height);\n background: var(--scrollbar-thumb-color);\n border-radius: 10px;\n }\n\n :host(._scrollbars._horz) .scrollbar-thumb {\n height: var(--scrollbar-thumb-width);\n width: var(--scrollbar-thumb-height);\n }\n\n /* scroll unfold */\n\n :host(._scroll-unfold) .scrollport {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n }\n\n :host(._scroll-unfold._horz) .scrollport {\n flex-direction: row;\n }\n \n :host(._scroll-unfold) .scroll-fold {\n position: sticky;\n }\n\n :host(._scroll-unfold:not(._horz)) {\n .scroll-fold {\n height: 25%;\n }\n\n .scroll-fold-start {\n top: var(--header-min-height);\n background: linear-gradient(to bottom, var(--background) 0%, transparent 100%);\n }\n\n .scroll-fold-end {\n bottom: var(--footer-min-height);\n background: linear-gradient(to top, var(--background) 0%, transparent 100%);\n }\n }\n\n :host(._scroll-unfold._horz) {\n .scroll-fold {\n width: 25%;\n }\n\n .scroll-fold-start {\n left: 0;\n background: linear-gradient(to right, var(--background) 0%, transparent 100%);\n }\n\n .scroll-fold-end {\n right: 0;\n background: linear-gradient(to left, var(--background) 0%, transparent 100%);\n }\n }\n\n /* ----------- theming ----------- */\n\n /* aero-blur */\n\n :host(._aero) :is(header, .main, footer) {\n backdrop-filter: blur(var(--aero-blur));\n }\n\n /* coloring */\n\n :host([type=\"info\"]) .container {\n color: var(--color-info);\n }\n \n :host([type=\"success\"]) .container {\n color: var(--color-success);\n }\n\n :host([type=\"error\"]) .container {\n color: var(--color-error);\n }\n\n :host([type=\"warning\"]) .container {\n color: var(--color-warning);\n }\n\n .main {\n color: var(--color-default);\n background: var(--background);\n }\n\n :host([type=\"info\"]) header {\n color: var(--header-color-info);\n }\n \n :host([type=\"success\"]) header {\n color: var(--header-color-success);\n }\n\n :host([type=\"error\"]) header {\n color: var(--header-color-error);\n }\n \n :host([type=\"info\"]) footer {\n color: var(--footer-color-info);\n }\n \n :host([type=\"success\"]) footer {\n color: var(--footer-color-success);\n }\n\n :host([type=\"error\"]) footer {\n color: var(--footer-color-error);\n }\n\n /* ----------- icons ----------- */\n\n .icon {\n display: none;\n opacity: 0.6;\n }\n\n :host([type=\"info\"]) .icon._info,\n :host([type=\"success\"]) .icon._success,\n :host([type=\"error\"]) .icon._error,\n :host([type=\"warning\"]) .icon._warning {\n display: block;\n }\n \n /* ----------- controls ----------- */\n\n .close-button {\n padding-inline: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n font-size: inherit;\n color: var(--close-button-color);\n cursor: pointer;\n border: none;\n background: none;\n }\n\n :host(:not([popover=\"manual\"], ._manual-dismiss)) .close-button {\n display: none;\n }\n\n .close-button:hover {\n opacity: 0.8;\n }\n\n :host(._horz) :is(.header-left, .close-button) {\n position: sticky;\n left: 1.2rem;\n right: 1.2rem;\n }\n \n ${this.css}\n </style>\n `;\n\n this.#viewElement = this.shadowRoot.querySelector('.view');\n this.#sentinelElement = this.#viewElement.querySelector('.sentinel');\n this.#spacingElement = this.#viewElement.querySelector('.spacing');\n this.#headerElement = this.#viewElement.querySelector('header');\n this.#headerBoxElement = this.#viewElement.querySelector('.header-box');\n this.#footerElement = this.#viewElement.querySelector('footer');\n }\n}\n\n// ---------------- DialogElement\n\nexport class DialogResponseEvent extends Event {\n\n #data;\n get data() { return this.#data; }\n\n constructor(data) {\n super('response');\n this.#data = data;\n }\n}\n\nexport class DialogElement extends ModalElement {\n\n static get events() {\n return super.events.concat(['response']);\n }\n\n get delegatesFocus() { return true; }\n\n // ----------------\n\n hidePopover() { this.respondWith(null); }\n\n respondWith(response) {\n const event = new DialogResponseEvent(response);\n super.hidePopover();\n this.dispatchEvent(event);\n }\n\n respondWithData() {\n const data = this.querySelector('form')\n || this.shadowRoot.querySelector('form');\n this.respondWith(data);\n }\n\n render(data = {}) {\n this.type = data.type;\n\n const html = [data.message];\n if (data.actions?.[0]) {\n html.push(`<span slot=\"action-0\">${data.actions[0]}</span>`);\n }\n if (data.actions?.[1]) {\n html.push(`<span slot=\"action-1\">${data.actions[1]}</span>`);\n }\n\n this.innerHTML = html.join('\\n');\n }\n\n get actionTexts() { return ['Cancel', 'Submit']; }\n\n get footerHTML() {\n return ` \n <button\n part=\"action-0\"\n class=\"action _secondary\"\n onclick=\"this.getRootNode().host.hidePopover()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n <slot name=\"action-0\" onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length);\">${this.actionTexts[0]}</slot>\n </button>\n\n <button\n part=\"action-1\"\n class=\"action _primary\"\n onclick=\"this.getRootNode().host.respondWithData()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M369-222 128-463l84-84 157 157 379-379 84 84-463 463Z\"/></svg>\n <slot name=\"action-1\" onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length);\">${this.actionTexts[1]}</slot>\n </button>\n `;\n }\n\n get css() {\n return super.css + `\n :host {\n --primary-button-color: var(--dialog-primary-button-color, black);\n --primary-button-background: var(--dialog-primary-button-background, white);\n --secondary-button-color: var(--dialog-secondary-button-color, white);\n --secondary-button-background: var(--dialog-secondary-button-background, black);\n --button-radius: var(--dialog-button-radius, 10px);\n }\n\n .main {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n }\n\n .footer-bar {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 1rem;\n }\n\n button.action {\n whitespace: nowrap;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border: none;\n border-radius: var(--button-radius);\n padding: 0.5rem 1rem;\n cursor: pointer;\n transition: all 0.2s;\n font-size: inherit;\n font-weight: bold;\n flex-grow: 1;\n }\n\n button.action:hover {\n opacity: 0.8;\n }\n \n button.action:is(:focus, :active, .active) {\n outline: none;\n box-shadow: none;\n opacity: 0.5;\n }\n\n button.action._primary {\n background-color: var(--primary-button-background);\n color: var(--primary-button-color);\n }\n\n button.action._secondary {\n background-color: var(--secondary-button-background);\n color: var(--secondary-button-color);\n }\n\n button.action:not(:has(slot:is(.has-slotted, :not(:empty)))) {\n display: none;\n }\n `;\n }\n}\n\n// ---------------- PromptElement\n\nexport class PromptElement extends DialogElement {\n\n static get observedAttributes() {\n return super.observedAttributes.concat(['value', 'placeholder']);\n }\n\n // ----------------\n\n attributeChangedCallback(name, old, _new) {\n super.attributeChangedCallback?.(name, old, _new);\n\n const input = this.shadowRoot.querySelector('input');\n if (name === 'value') input.value = _new;\n if (name === 'placeholder') input.placeholder = _new;\n }\n\n set placeholder(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('placeholder');\n } else this.setAttribute('placeholder', value);\n }\n\n get placeholder() { return this.getAttribute('placeholder'); }\n\n set value(value) {\n if ([undefined, null].includes(value)) {\n this.removeAttribute('value');\n } else this.setAttribute('value', value);\n }\n\n get value() { return this.getAttribute('value'); }\n\n respondWithData() {\n const data = this.shadowRoot.querySelector('input').value;\n this.respondWith(data);\n }\n\n render(data = {}) {\n this.value = data.value;\n this.placeholder = data.placeholder;\n super.render(data);\n }\n\n get mainHTML() {\n return `\n <form class=\"main\" part=\"main\" onsubmit=\"this.getRootNode().host.respondWithData(); event.preventDefault();\">\n <slot></slot>\n <slot name=\"input\">\n <input part=\"input\" type=\"text\" autocomplete=\"off\" autofocus placeholder=\"Enter response\">\n </slot>\n </form>\n `;\n }\n\n get actionTexts() { return ['Cancel', 'Submit']; }\n\n get css() {\n return super.css + `\n :host {\n --input-color: var(--prompt-input-color, inherit);\n --input-background: var(--prompt-input-background, rgba(255, 255, 255, 0.2));\n --input-radius: var(--prompt-input-radius, 10px);\n }\n\n input {\n width: 100%;\n border: none;\n border-radius: var(--input-radius);\n padding: 0.6rem 1rem;\n color: var(--input-color);\n background-color: var(--input-background);\n }\n\n input::placeholder {\n color: currentColor;\n }\n `;\n }\n}\n\n// ---------------- ConfirmElement\n\nexport class ConfirmElement extends DialogElement {\n get actionTexts() { return ['No', 'Yes']; }\n\n respondWith(response) { super.respondWith(!!response); }\n\n respondWithData() { super.respondWith(true); }\n}\n\n// ---------------- AlertElement\n\nexport class AlertElement extends DialogElement {\n get actionTexts() { return ['', 'Got it']; }\n}\n\n// ---------------- define\n\nexport function defineElements() {\n // radius\n\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-radius-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n\n // header-box\n\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-header-box-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-header-box-progress-a',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-header-box-progress-b',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n\n // minmax\n\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-minmax-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-minmax-progress-a',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-minmax-progress-b',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n\n // minmax-balance\n\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-total-minmax-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n\n // swipe-dismiss\n\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-swipe-dismiss-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n\n // Scrollbars\n\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-scrollbar-appear-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-scrollbar-progress',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-scrollbar-progress-a',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n try {\n CSS.registerProperty({\n name: '--wq-internal-var-scrollbar-progress-b',\n syntax: '<number>',\n inherits: true,\n initialValue: '0'\n });\n } catch (e) { }\n\n customElements.define('wq-toast', ToastElement);\n customElements.define('wq-modal', ModalElement);\n customElements.define('wq-dialog', DialogElement);\n customElements.define('wq-prompt', PromptElement);\n customElements.define('wq-confirm', ConfirmElement);\n customElements.define('wq-alert', AlertElement);\n}", "import { defineElements } from '../../src/webflo-runtime/webflo-client/webflo-elements.js';\n\ndefineElements();"],
|
|
5
|
+
"mappings": "MAEO,IAAMA,EAAN,cAA0B,WAAY,CAEzC,WAAW,QAAS,CAChB,MAAO,CAAC,CACZ,CAEA,WAAW,oBAAqB,CAC5B,OAAO,KAAK,OAAO,IAAKC,GAAM,KAAKA,GAAG,CAC1C,CAIAC,GAAyB,CAAC,EAE1BC,GAA2BC,EAAUC,EAAW,CAC5C,QAAWC,KAAa,KAAK,YAAY,OAEjCF,IAAa,KAAKE,MAElB,KAAKJ,GAAuBE,KAC5B,KAAK,oBAAoBE,EAAW,KAAKJ,GAAuBE,EAAS,EACzE,KAAKF,GAAuBE,GAAY,MAGxCC,IACA,KAAKH,GAAuBE,GAAY,SAAS,QAASC,CAAS,EAAE,KAAK,IAAI,EAC9E,KAAK,iBAAiBC,EAAW,KAAKJ,GAAuBE,EAAS,GAGlF,CAEAG,IAAwB,CACpB,QAAWD,KAAa,KAAK,YAAY,OAAQ,CAE7C,IAAMF,EAAW,KAAKE,IAClBE,EAAW,KAEf,OAAO,eAAe,KAAMJ,EAAU,CAClC,IAAK,IAAMI,EACX,IAAMC,GAAY,CAMd,GALID,IACA,KAAK,oBAAoBF,EAAWE,CAAQ,EAC5CA,EAAW,MAGX,OAAOC,GAAY,WACnB,KAAK,iBAAiBH,EAAWG,CAAO,UACjCA,GAAY,KACnB,MAAM,IAAI,MAAM,IAAIL,uCAA8C,EAGtEI,EAAWC,CACf,CACJ,CAAC,CACL,CACJ,CAIA,yBAAyBC,EAAMC,EAAKC,EAAM,CACtC,KAAKT,GAA2BO,EAAME,CAAI,CAC9C,CAEA,aAAc,CACV,MAAM,EACN,KAAKL,GAAsB,CAC/B,CACJ,EAIaM,EAAN,cAA2Bb,CAAY,CAE1C,IAAI,KAAKc,EAAO,CACR,CAAC,OAAW,IAAI,EAAE,SAASA,CAAK,EAChC,KAAK,gBAAgB,MAAM,EACxB,KAAK,aAAa,OAAQA,CAAK,CAC1C,CAEA,IAAI,MAAO,CAAE,OAAO,KAAK,aAAa,MAAM,CAAG,CAE/C,IAAI,aAAc,CAAE,MAAO,EAAI,CAE/B,IAAI,KAAM,CAAE,MAAO,EAAI,CAEvBC,GAAc,KAEdC,IAAa,CACL,KAAKD,KACL,KAAK,WAAW,YAAY,KAAKA,EAAW,EACxC,KAAK,QAAQ,eAAe,GAC5B,KAAKA,GAAY,YAAY,EAGzC,CAEA,mBAAmBE,EAAM,CACjB,KAAK,aAAa,WAAW,IACzBA,EAAK,cAAc,EAAE,KAAMC,GAAMA,EAAE,WAAa,SAAWA,EAAE,YAAY,KAAK,CAAC,EAC/E,KAAK,YAAY,EACd,KAAK,YAAY,EAEhC,CAEA,OAAO,CAAE,QAAAC,EAAS,QAAAC,CAAQ,EAAGC,EAAa,KAAMC,EAAY,EAAG,CAC3D,GAAIF,GAAWE,EAAY,EAAG,CAC1B,IAAMC,EAAmB,SAAS,cAAc,KAAK,OAAO,EAE5DA,EAAiB,aAAa,UAAW,KAAK,aAAa,SAAS,GAAK,MAAM,EAC3E,KAAK,UAAU,SAAS,MAAM,GAC9BA,EAAiB,UAAU,IAAI,MAAM,EAEzCA,EAAiB,OAAO,CAAE,QAAAJ,CAAQ,EAAGE,EAAY,CAAC,EAElD,KAAK,OAAOD,EAASG,EAAkBD,EAAY,CAAC,EACpD,MACJ,CAEA,KAAKP,IAAa,OAAO,EACzB,KAAKA,GAAcM,EAEnB,KAAKL,GAAW,EAEhB,IAAMQ,EAAkB,WAAWH,GAAY,MAAM,iBAAiB,eAAe,GAAK,GAAG,EAC7F,KAAK,MAAM,YAAY,gBAAkBG,EAAkB,GAAO,GAAG,EAGrE,KAAK,KAAOL,EAAQ,KACpB,KAAK,UAAYA,EAAQ,OAC7B,CAEA,mBAAoB,CACX,KAAK,UACN,KAAK,QAAU,OAEvB,CAEA,aAAc,CACV,MAAM,EACN,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,EAElC,KAAK,iBAAiB,SAAWlB,GAAM,CAC/BA,EAAE,WAAa,OACf,KAAKc,IAAa,YAAY,EACvBd,EAAE,WAAa,WACtB,KAAKc,IAAa,YAAY,EAC1B,KAAK,aAAa,WAAW,IAAM,WACnC,KAAK,UAAY,IAG7B,CAAC,EAED,KAAK,WAAW,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAUjB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAyNV,KAAK;AAAA,kBAGX,KAAKC,GAAW,CACpB,CACJ,EAIaS,EAAN,cAA+B,KAAM,CAExCC,GACA,IAAI,OAAQ,CAAE,OAAO,KAAKA,EAAQ,CAElC,YAAYC,EAAO,CACf,MAAM,QAAQ,EACd,KAAKD,GAASC,CAClB,CACJ,EAEaC,EAAN,cAA2B5B,CAAY,CAE1C,WAAW,QAAS,CAChB,OAAO,MAAM,OAAO,OAAO,CAAC,QAAQ,CAAC,CACzC,CAEA,WAAW,oBAAqB,CAC5B,OAAO,MAAM,mBAAmB,OAAO,CAAC,OAAO,CAAC,CACpD,CAEA,IAAI,gBAAiB,CAAE,MAAO,EAAO,CACrC,IAAI,WAAY,CAAE,MAAO,EAAM,CAI/B,IAAI,KAAKc,EAAO,CACR,CAAC,OAAW,IAAI,EAAE,SAASA,CAAK,EAChC,KAAK,gBAAgB,MAAM,EACxB,KAAK,aAAa,OAAQA,CAAK,CAC1C,CAEA,IAAI,MAAO,CAAE,OAAO,KAAK,aAAa,MAAM,CAAG,CAE/C,IAAI,eAAgB,CAAE,MAAO,EAAI,CAEjC,IAAI,YAAa,CAAE,MAAO,EAAI,CAE9B,IAAI,oBAAqB,CAAE,MAAO,EAAI,CAEtC,IAAI,UAAW,CAAE,MAAO,EAAI,CAE5B,IAAI,aAAc,CAAE,MAAO,EAAI,CAE/B,IAAI,YAAa,CAAE,MAAO,EAAI,CAE9B,IAAI,KAAM,CAAE,MAAO,EAAI,CAEvBe,GACAC,GACAC,GACAC,GACAC,GACAC,GAEA,oBAAqB,CACjB,IAAMC,EAAY,KAAKN,GAAa,YAC9BO,EAAa,KAAKP,GAAa,aACrC,KAAK,MAAM,YAAY,eAAgBM,EAAY,IAAI,EACvD,KAAK,MAAM,YAAY,gBAAiBC,EAAa,IAAI,CAC7D,CAEA,sBAAuB,CACnB,KAAK,MAAM,YAAY,sBAAuB,KAAKH,GAAkB,aAAe,IAAI,EACxF,KAAK,MAAM,YAAY,sBAAuB,KAAKD,GAAe,aAAe,IAAI,CACzF,CAEA,sBAAuB,CACnB,KAAK,MAAM,YAAY,sBAAuB,KAAKE,GAAe,aAAe,IAAI,CACzF,CAEA,mBAAoB,CAChB,KAAK,MAAM,YAAY,uBAAwB,KAAKL,GAAa,aAAe,IAAI,EACpF,KAAK,MAAM,YAAY,sBAAuB,KAAKA,GAAa,YAAc,IAAI,CACtF,CAEA,4BAA6B,CACzB,sBAAsB,IAAM,CACxB,IAAMQ,EAAe,KAAK,UAAU,SAAS,gBAAgB,EACvDC,EAAe,CAAC,CAAC,OAAO,iBAAiB,IAAI,EAAE,iBAAiB,uBAAuB,GAEzFD,GAAgBC,IAChB,sBAAsB,IAAM,CACxB,IAAIC,EAAO,EAAGC,EAAM,EAChB,KAAK,QAAQ,iCAAiC,EAC9C,KAAKX,GAAa,SAAS,CAAE,IAAAW,EAAK,KAAAD,CAAK,CAAC,GAEpC,KAAK,UAAU,SAAS,OAAO,EAC/BA,EAAO,KAAKT,GAAiB,YAE7BU,EAAM,KAAKV,GAAiB,cAE5B,KAAKD,GAAa,UAAYW,GAAO,KAAKX,GAAa,WAAaU,IACpE,KAAKV,GAAa,SAAS,CAAE,IAAAW,EAAK,KAAAD,CAAK,CAAC,EAGpD,CAAC,EAGL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACnB,MAAK,UAAU,SAAS,YAAY,GACxC,KAAK,mBAAmB,CAC5B,CAAC,CACL,CAEAE,GAAsB,KAEtB,kBAAmB,CACf,IAAMJ,EAAe,KAAK,UAAU,SAAS,gBAAgB,EACvDK,EAAe,KAAK,UAAU,SAAS,gBAAgB,EAE7D,GAAI,CAACL,GAAgB,CAACK,EAAc,OAEpC,IAAMC,EAAU,CACZ,KAAM,KAAKd,GACX,UAAW,CAAC,EAAG,CAAC,CACpB,EAEMe,EAAW,IAAI,qBAAsBC,GAAY,CACnD,QAAWC,KAASD,EAAS,CAEzB,GAAIC,EAAM,SAAW,KAAKf,GAAiB,CACvC,IAAMgB,EAAQ,IAAItB,EAAiB,EAAIqB,EAAM,iBAAiB,EAC9D,KAAK,cAAcC,CAAK,CAC5B,CAGI,KAAKC,IACFF,EAAM,SAAW,KAAKhB,IACtBgB,EAAM,gBACNA,EAAM,mBAAqB,IAC9B,KAAK,YAAY,CAEzB,CACJ,EAAGH,CAAO,EAEV,WAAW,IAAM,CACTD,GAAcE,EAAS,QAAQ,KAAKb,EAAe,EACnDM,GAAcO,EAAS,QAAQ,KAAKd,EAAgB,CAC5D,EAAG,GAAG,EAEN,KAAKW,GAAsB,IAAMG,EAAS,WAAW,CACzD,CAEAI,GAAgB,GAChBC,GAEAC,IAAwB,CACpB,KAAKF,GAAgB,GACrB,IAAMG,EAAmB,IAAM,KAAKH,GAAgB,GACpD,KAAKnB,GAAa,iBAAiB,SAAUsB,CAAgB,EAE7D,KAAK,2BAA2B,EAChC,IAAMC,EAAe,IAAM,KAAK,2BAA2B,EAC3D,OAAO,iBAAiB,SAAUA,CAAY,EAE9C,KAAKH,KAA0B,EAC/B,KAAKA,GAA0B,IAAM,CACjC,OAAO,oBAAoB,SAAUG,CAAY,EACjD,KAAKvB,GAAa,oBAAoB,SAAUsB,CAAgB,CACpE,CACJ,CAIA,yBAAyBzC,EAAMC,EAAKC,EAAM,CACtC,MAAM,2BAA2BF,EAAMC,EAAKC,CAAI,EAE5CF,IAAS,SAAWC,IAAQC,GAAM,KAAKsC,GAAsB,CACrE,CAEA,mBAAoB,CAChB,MAAM,oBAAoB,EAErB,KAAK,UACN,KAAK,QAAU,UAEf,KAAK,aAAa,MAAM,GACxB,KAAK,YAAY,CAEzB,CAEA,sBAAuB,CACnB,MAAM,uBAAuB,EAE7B,KAAKD,KAA0B,EAC/B,KAAKA,GAA0B,KAC/B,KAAKR,KAAsB,EAC3B,KAAKA,GAAsB,IAC/B,CAEA,aAAc,CACV,MAAM,EAEN,KAAK,aAAa,CAAE,KAAM,OAAQ,eAAgB,KAAK,cAAe,CAAC,EAEvE,KAAK,iBAAiB,SAAWxC,GAAM,CAC/BA,EAAE,WAAa,QAIX,IAAI,SAAS,mBAAmB,GAChC,WAAY,YACZ,EAAE,WAAY,cAEd,KAAK,MAAM,UAAY,OACvB,KAAK,aACL,KAAK,MAAM,UAAY,IAG3B,KAAKiD,GAAsB,EAC3B,KAAK,iBAAiB,EAElB,CAAC,KAAK,gBAAkB,KAAK,WAC1B,CAAC,KAAK,cAAc,aAAa,GACpC,KAAK,WAAW,cAAc,aAAa,GAAG,MAAM,GAEjDjD,EAAE,WAAa,WACtB,KAAKgD,KAA0B,EAC/B,KAAKA,GAA0B,KAC/B,KAAKR,KAAsB,EAC3B,KAAKA,GAAsB,KAEnC,CAAC,EAED,KAAK,WAAW,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAaT,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAaG,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQlB,KAAK,oBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAkB/B,KAAK,UAAY,iCAAiC,KAAK,aAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAS7D,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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",
|
|
6
|
+
"names": ["BaseElement", "e", "#compiledEventHandlers", "#compileAttrEventsIfNeeded", "attrName", "attrValue", "eventName", "#initPropEventsSystem", "_handler", "handler", "name", "old", "_new", "ToastElement", "value", "#childToast", "#addNested", "slot", "n", "content", "context", "childToast", "recursion", "directChildToast", "childStartDelay", "ModalMinmaxEvent", "#ratio", "ratio", "ModalElement", "#viewElement", "#sentinelElement", "#spacingElement", "#headerElement", "#headerBoxElement", "#footerElement", "viewWidth", "viewHeight", "swipeDismiss", "minmaxScroll", "left", "top", "#unbindMinmaxWorker", "minmaxEvents", "options", "observer", "entries", "entry", "event", "#userScrolled", "#unbindDimensionsWorker", "#bindDimensionsWorker", "handleUserScroll", "handleResize", "DialogResponseEvent", "#data", "data", "DialogElement", "response", "html", "PromptElement", "input", "ConfirmElement", "AlertElement", "defineElements", "defineElements"]
|
|
7
7
|
}
|
package/test/browser/index.html
CHANGED
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
<div slot="footer" style="padding: 1rem;">Footer</div>
|
|
56
56
|
</wq-modal>
|
|
57
57
|
|
|
58
|
-
<wq-dialog type="success" id="pop2" popover="manual" style="width:
|
|
59
|
-
class="
|
|
58
|
+
<wq-dialog type="success" id="pop2" popover="manual" style="width: 430px; height: 600px; container-type: size;"
|
|
59
|
+
class="_right _horz _container _minmax-events _scroll-unfold _swipe-dismiss _edge-tight _alt-edge-tight _scrollbars"
|
|
60
60
|
onminmax="console.log('2------', event.ratio)">
|
|
61
61
|
<span slot="header">Success</span>
|
|
62
62
|
<span>JJjdj djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
|
|
@@ -157,8 +157,9 @@
|
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
:is(#pop1, #pop2) {
|
|
160
|
-
--modal-minmax-length:
|
|
161
|
-
--modal-
|
|
160
|
+
--modal-minmax-length: 200px;
|
|
161
|
+
--modal-swipe-dismiss-length: 200px;
|
|
162
|
+
--modal-expanse-length: 0px;
|
|
162
163
|
--modal-header-open-background: blue;
|
|
163
164
|
--modal-header-background: black;
|
|
164
165
|
}
|