@digital-realty/ix-dialog 1.2.7 → 1.2.8
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/dist/IxDialog.d.ts +4 -1
- package/dist/IxDialog.js +5 -5
- package/dist/IxDialog.js.map +1 -1
- package/dist/internal/dialog.d.ts +24 -5
- package/dist/internal/dialog.js +167 -55
- package/dist/internal/dialog.js.map +1 -1
- package/dist/ix-dialog.min.js +2 -2
- package/package.json +4 -4
package/dist/IxDialog.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { CSSResultGroup, LitElement } from 'lit';
|
|
2
2
|
import { Dialog } from './internal/dialog.js';
|
|
3
3
|
import './md-dialog.js';
|
|
4
|
-
|
|
4
|
+
declare const ixDialogBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("@material/web/labs/behaviors/element-internals.js").WithElementInternals>, object>;
|
|
5
|
+
export declare class IxDialog extends ixDialogBaseClass {
|
|
6
|
+
/** @nocollapse */
|
|
5
7
|
static styles: CSSResultGroup;
|
|
6
8
|
static shadowRootOptions: {
|
|
7
9
|
delegatesFocus: boolean;
|
|
@@ -62,3 +64,4 @@ export declare class IxDialog extends LitElement {
|
|
|
62
64
|
private renderNativeDialog;
|
|
63
65
|
render(): symbol | import("lit-html").TemplateResult<1>;
|
|
64
66
|
}
|
|
67
|
+
export {};
|
package/dist/IxDialog.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
|
|
3
|
+
import { mixinElementInternals, } from '@material/web/labs/behaviors/element-internals.js';
|
|
3
4
|
import { css, html, LitElement, nothing, render } from 'lit';
|
|
4
5
|
import { property, query, state } from 'lit/decorators.js';
|
|
5
6
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
6
7
|
import { IxDialogStyles } from './ix-dialog-styles.js';
|
|
7
8
|
import './md-dialog.js';
|
|
8
|
-
|
|
9
|
+
const ixDialogBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
|
|
10
|
+
export class IxDialog extends ixDialogBaseClass {
|
|
9
11
|
constructor() {
|
|
10
12
|
super(...arguments);
|
|
11
13
|
this.open = false;
|
|
@@ -431,9 +433,7 @@ export class IxDialog extends LitElement {
|
|
|
431
433
|
: this.renderMdDialog();
|
|
432
434
|
}
|
|
433
435
|
}
|
|
434
|
-
|
|
435
|
-
requestUpdateOnAriaChange(IxDialog);
|
|
436
|
-
})();
|
|
436
|
+
/** @nocollapse */
|
|
437
437
|
IxDialog.styles = [
|
|
438
438
|
IxDialogStyles,
|
|
439
439
|
css `
|
package/dist/IxDialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { css, CSSResultGroup, html, LitElement, nothing, render } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { Dialog } from './internal/dialog.js';\nimport { IxDialogStyles } from './ix-dialog-styles.js';\nimport './md-dialog.js';\n\nexport class IxDialog extends LitElement {\n static {\n requestUpdateOnAriaChange(IxDialog);\n }\n\n static styles: CSSResultGroup = [\n IxDialogStyles,\n css`\n :host([use-native-dialog]) dialog[open],\n :host([use-native-dialog][closing]) dialog {\n position: fixed;\n inset: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n display: block;\n inline-size: 100vw;\n block-size: 100dvh;\n pointer-events: none;\n z-index: 99;\n overscroll-behavior: contain;\n }\n\n :host([use-native-dialog]) dialog[open] .scrim,\n :host([use-native-dialog][closing]) .scrim,\n :host([use-native-dialog]) dialog[open] > .container,\n :host([use-native-dialog][closing]) dialog > .container {\n pointer-events: auto;\n }\n\n :host([use-native-dialog]) dialog[open] .scrim,\n :host([use-native-dialog][closing]) .scrim {\n position: fixed;\n inset: 0;\n background: var(--ix-dialog-scrim, rgba(0, 0, 0, 0.32));\n }\n\n :host([use-native-dialog]) dialog[open] .scrim {\n overscroll-behavior: contain;\n touch-action: none;\n }\n\n :host([use-native-dialog]) dialog[open] > .container,\n :host([use-native-dialog][closing]) dialog > .container {\n transform: translate(-50%, -50%);\n width: auto;\n height: auto;\n max-block-size: var(--ix-dialog-max-height, 90dvh);\n border-radius: 0.75rem;\n background: var(--ix-dialog-bg, #fff);\n box-shadow: var(\n --ix-dialog-shadow,\n 0 0.625rem 1.875rem rgba(0, 0, 0, 0.25)\n );\n display: grid;\n grid-template-rows: auto 1fr auto;\n overflow: hidden;\n z-index: 9;\n transform-origin: top center;\n will-change: transform, opacity;\n }\n\n :host([use-native-dialog]) .headline,\n :host([use-native-dialog]) .content,\n :host([use-native-dialog]) .actions {\n padding: var(--ix-dialog-section-padding, 1rem);\n }\n\n :host([use-native-dialog]) .content {\n overflow: auto;\n }\n\n :host([use-native-dialog]) .actions {\n display: inline-flex;\n gap: var(--ix-dialog-actions-gap, 0.5rem);\n justify-content: flex-end;\n align-items: center;\n padding-block: var(--ix-dialog-actions-padding-block, 0.75rem);\n border-top: var(\n --ix-dialog-actions-border,\n 1px solid rgba(0, 0, 0, 0.08)\n );\n }\n\n @keyframes ix-fold-in {\n from {\n transform: translate(-50%, -50%) translateY(-0.5rem) scaleY(0.92);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -50%) translateY(0) scaleY(1);\n opacity: 1;\n }\n }\n @keyframes ix-fold-out {\n from {\n transform: translate(-50%, -50%) translateY(0) scaleY(1);\n opacity: 1;\n }\n to {\n transform: translate(-50%, -50%) translateY(-0.5rem) scaleY(0.98);\n opacity: 0;\n }\n }\n\n :host([use-native-dialog]:not([closing])) dialog[open] > .container {\n animation: ix-fold-in var(--ix-dialog-in-dur, 1000ms)\n cubic-bezier(0.2, 0.7, 0.3, 1) both;\n }\n :host([use-native-dialog][closing]) dialog > .container {\n animation: ix-fold-out var(--ix-dialog-out-dur, 250ms)\n cubic-bezier(0.2, 0.7, 0.3, 1) both;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([use-native-dialog]) dialog > .container {\n animation: none !important;\n }\n }\n `,\n ];\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.dialog') readonly component!: Dialog;\n\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ type: Boolean, attribute: 'prevent-cancel' }) preventCancel =\n false;\n\n @property({ type: Boolean }) preventCloseOnScrimClick = false;\n\n @property({ type: Boolean }) disableNextClickIsFromContent = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'use-native-dialog' })\n useNativeDialog = false;\n\n @property({ type: Boolean }) allowOverflow = false;\n\n /**\n * Used in conjunction with `useNativeDialog`\n */\n @property({ type: Object }) contentStyles?: CSSResultGroup;\n\n @state() private nativeClosing = false;\n\n private dialogRef: Ref<HTMLDialogElement> = createRef();\n\n private containerRef: Ref<HTMLDivElement> = createRef();\n\n private portalHost?: HTMLElement;\n\n private portalRoot?: ShadowRoot;\n\n private portalStyleEl?: HTMLStyleElement;\n\n private pointerDownInside = false;\n\n private isScrollLocked = false;\n\n private scrollYBackup = 0;\n\n private removeScrollHandlers?: () => void;\n\n private nativeOnEnd?: () => void;\n\n private mo?: MutationObserver;\n\n private get nativeDialog(): HTMLDialogElement | null {\n return this.dialogRef.value ?? null;\n }\n\n private get nativeDialogContainer(): HTMLDivElement | null {\n return this.containerRef.value ?? null;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.mo = new MutationObserver(() => {\n if (this.useNativeDialog && this.open) this.populatePortal();\n });\n this.mo.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n characterData: true,\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.mo?.disconnect();\n this.unlockScroll();\n this.teardownPortal();\n }\n\n updated(changed: Map<string, unknown>) {\n if (!this.useNativeDialog) return;\n if (changed.has('open')) {\n if (this.open) {\n this.ensurePortal();\n if (this.portalRoot) {\n this.attachPortalStyles();\n render(this.portalTemplate(), this.portalRoot);\n this.populatePortal();\n }\n if (this.nativeClosing) {\n this.nativeClosing = false;\n this.nativeDialogContainer?.classList.remove('closing');\n if (this.nativeOnEnd && this.nativeDialogContainer) {\n this.nativeDialogContainer.removeEventListener(\n 'animationend',\n this.nativeOnEnd\n );\n }\n this.nativeOnEnd = undefined;\n }\n this.dispatchEvent(\n new Event('open', { bubbles: true, composed: true })\n );\n this.lockScroll();\n requestAnimationFrame(() => {\n this.nativeDialog?.show();\n requestAnimationFrame(() => {\n this.dispatchEvent(\n new Event('opened', { bubbles: true, composed: true })\n );\n });\n });\n } else {\n this.startNativeCloseAnimation();\n }\n }\n }\n\n public dismiss() {\n if (!this.open) return;\n Promise.resolve().then(() => {\n this.requestClose();\n });\n }\n\n private startNativeCloseAnimation() {\n if (this.nativeClosing) return;\n this.nativeClosing = true;\n this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));\n\n const finish = () => {\n this.nativeDialogContainer?.classList.remove('closing');\n this.nativeClosing = false;\n this.nativeDialog?.close();\n this.unlockScroll();\n this.dispatchEvent(\n new Event('closed', { bubbles: true, composed: true })\n );\n this.moveNodesBackFromPortal();\n this.teardownPortal();\n };\n\n const container = this.nativeDialogContainer;\n if (!container) {\n finish();\n return;\n }\n\n container.classList.add('closing');\n\n let done = false;\n const onEnd = () => {\n if (done) return;\n done = true;\n container.removeEventListener('animationend', onEnd);\n finish();\n };\n this.nativeOnEnd = onEnd;\n container.addEventListener('animationend', onEnd, { once: true });\n\n window.setTimeout(onEnd, 1);\n }\n\n private ensurePortal() {\n if (this.portalRoot) return;\n const host = document.createElement('ix-dialog-portal-host');\n const root = host.attachShadow({ mode: 'open' });\n if (this.shadowRoot && 'adoptedStyleSheets' in this.shadowRoot) {\n (root as any).adoptedStyleSheets = (\n this.shadowRoot as any\n ).adoptedStyleSheets;\n }\n document.body.appendChild(host);\n this.portalHost = host;\n this.portalRoot = root;\n }\n\n private attachPortalStyles() {\n if (!this.portalRoot || this.portalStyleEl) return;\n const style = document.createElement('style');\n\n const portalLayoutStyles = `\n dialog {\n position: fixed;\n inset: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n display: grid;\n place-items: center;\n pointer-events: none;\n z-index: 1000;\n max-width: none !important;\n max-height: none !important;\n }\n .scrim {\n position: fixed;\n inset: 0;\n background: var(--ix-dialog-scrim, rgba(0,0,0,0.5));\n pointer-events: auto;\n z-index: 1000;\n touch-action: none;\n border: 0;\n padding: 0;\n appearance: none;\n }\n .container {\n position: relative;\n border-radius: 0.75rem;\n background: var(--ix-dialog-bg, #fff);\n box-shadow: var(--ix-dialog-shadow, 0 10px 30px rgba(0,0,0,0.25));\n display: grid;\n grid-template-rows: auto 1fr auto;\n overflow: visible;\n pointer-events: auto;\n z-index: 1001;\n max-width: none!important;\n }\n .container .content {\n overflow: visible;\n }\n @media (prefers-reduced-motion: reduce) {\n dialog > .container { animation: none !important; }\n }\n `;\n\n if (this.contentStyles) {\n const stylesArray: CSSResultGroup[] = Array.isArray(this.contentStyles)\n ? this.contentStyles\n : [this.contentStyles];\n const customContentStyles = stylesArray\n .map(contentStyle => {\n if (typeof contentStyle === 'object' && 'cssText' in contentStyle) {\n return contentStyle.cssText;\n }\n return '';\n })\n .join('\\n');\n\n style.textContent = customContentStyles + portalLayoutStyles;\n } else {\n style.textContent = portalLayoutStyles;\n }\n\n this.portalRoot.append(style);\n this.portalStyleEl = style;\n }\n\n private teardownPortal() {\n if (!this.portalHost) return;\n if (this.portalRoot) render(nothing, this.portalRoot);\n this.portalStyleEl?.remove();\n this.portalStyleEl = undefined;\n this.portalHost.remove();\n this.portalRoot = undefined;\n this.portalHost = undefined;\n }\n\n private moveNodesToPortal(slotName: string, targetSelector: string) {\n if (!this.nativeDialogContainer) return;\n const target = this.nativeDialogContainer.querySelector(targetSelector);\n if (!target) return;\n const nodes = Array.from(this.children).filter(\n el => el instanceof HTMLElement && el.slot === slotName\n );\n nodes.forEach(n => target.appendChild(n));\n }\n\n private moveNodesBackFromPortal() {\n if (!this.nativeDialogContainer) return;\n const h = this.nativeDialogContainer.querySelector('.headline');\n const b = this.nativeDialogContainer.querySelector('.content');\n const a = this.nativeDialogContainer.querySelector('.actions');\n [h, b, a].forEach(container => {\n if (!container) return;\n const children = Array.from(container.childNodes);\n children.forEach(n => this.appendChild(n));\n });\n }\n\n private populatePortal() {\n this.moveNodesToPortal('headline', '.headline');\n this.moveNodesToPortal('content', '.content');\n this.moveNodesToPortal('actions', '.actions');\n }\n\n private onKeydown = (e: KeyboardEvent) => {\n if (e.key !== 'Escape') return;\n if (this.preventCancel) {\n e.preventDefault();\n return;\n }\n const cancelEvt = new Event('cancel', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n const prevented = !this.dispatchEvent(cancelEvt);\n if (prevented) {\n e.preventDefault();\n return;\n }\n this.requestClose();\n };\n\n private onNativeCancel = (e: Event) => {\n const forwarded = new Event('cancel', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n const prevented = !this.dispatchEvent(forwarded);\n if (prevented) {\n e.preventDefault();\n return;\n }\n this.requestClose();\n };\n\n private requestClose() {\n this.open = false;\n }\n\n private onScrimClick = () => {\n if (!this.preventCloseOnScrimClick) this.requestClose();\n };\n\n private lockScroll() {\n if (this.isScrollLocked) return;\n this.isScrollLocked = true;\n this.scrollYBackup =\n window.scrollY || document.documentElement.scrollTop || 0;\n const { body } = document;\n const scrollbarWidth =\n window.innerWidth - document.documentElement.clientWidth;\n if (scrollbarWidth > 0) {\n body.style.paddingRight = `${scrollbarWidth}px`;\n }\n body.style.overflow = 'hidden';\n body.style.position = 'fixed';\n body.style.top = `-${this.scrollYBackup}px`;\n body.style.left = '0';\n body.style.right = '0';\n body.style.width = '100%';\n const stopIfOutside = (ev: Event) => {\n const t = ev.target as Node | null;\n if (!this.nativeDialogContainer || !t) return;\n if (!this.nativeDialogContainer.contains(t)) ev.preventDefault();\n };\n const onTouchMove = (e: TouchEvent) => stopIfOutside(e);\n const onKeyDown = (e: KeyboardEvent) => {\n const keys = [\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End',\n 'ArrowUp',\n 'ArrowDown',\n ' ',\n ];\n if (!keys.includes(e.key)) return;\n const t = e.target as Node | null;\n if (!this.nativeDialogContainer || !t) return;\n if (!this.nativeDialogContainer.contains(t)) e.preventDefault();\n };\n window.addEventListener('touchmove', onTouchMove, { passive: false });\n window.addEventListener('keydown', onKeyDown, { passive: false });\n this.removeScrollHandlers = () => {\n window.removeEventListener('touchmove', onTouchMove as any);\n window.removeEventListener('keydown', onKeyDown as any);\n };\n }\n\n private unlockScroll() {\n if (!this.isScrollLocked) return;\n this.isScrollLocked = false;\n if (this.removeScrollHandlers) {\n this.removeScrollHandlers();\n this.removeScrollHandlers = undefined;\n }\n const { body } = document;\n body.style.paddingRight = '';\n body.style.position = '';\n body.style.top = '';\n body.style.left = '';\n body.style.right = '';\n body.style.overflow = '';\n body.style.width = '';\n window.scrollTo(0, this.scrollYBackup || 0);\n }\n\n onOpen() {\n this.dispatchEvent(new Event('open'));\n this.lockScroll();\n }\n\n onOpened() {\n this.dispatchEvent(new Event('opened'));\n }\n\n onClose() {\n this.dispatchEvent(new Event('close'));\n }\n\n onClosed() {\n this.dispatchEvent(new Event('closed'));\n this.unlockScroll();\n }\n\n onCancel(e: Event) {\n if (this.preventCancel) e.preventDefault();\n this.dispatchEvent(new Event('cancel', { bubbles: true, composed: true }));\n }\n\n private portalTemplate() {\n return html`\n <dialog\n ${ref(this.dialogRef)}\n @cancel=${this.onNativeCancel}\n @keydown=${this.onKeydown}\n >\n <button\n class=\"scrim\"\n type=\"button\"\n aria-label=\"Close dialog\"\n @click=${this.onScrimClick}\n ></button>\n <div\n class=\"container\"\n ${ref(this.containerRef)}\n role=\"dialog\"\n aria-modal=\"true\"\n >\n <div class=\"headline\"></div>\n <div class=\"content\"></div>\n <div class=\"actions\"></div>\n </div>\n </dialog>\n `;\n }\n\n private renderMdDialog() {\n if (this.portalHost) {\n this.moveNodesBackFromPortal();\n this.teardownPortal();\n }\n return html`<md-dialog\n ?open=${this.open}\n class=\"dialog\"\n ?preventCloseOnScrimClick=${this.preventCloseOnScrimClick}\n ?disableNextClickIsFromContent=${this.disableNextClickIsFromContent}\n ?allowOverflow=${this.allowOverflow}\n @open=${this.onOpen}\n @opened=${this.onOpened}\n @close=${this.onClose}\n @closed=${this.onClosed}\n @cancel=${this.onCancel}\n >\n <slot slot=\"headline\" name=\"headline\"></slot>\n <slot slot=\"content\" name=\"content\"></slot>\n <slot slot=\"actions\" name=\"actions\"></slot>\n </md-dialog>`;\n }\n\n private renderNativeDialog() {\n if (this.portalRoot) {\n render(this.portalTemplate(), this.portalRoot);\n this.populatePortal();\n }\n return nothing;\n }\n\n render() {\n return this.useNativeDialog\n ? this.renderNativeDialog()\n : this.renderMdDialog();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';\nimport {\n mixinElementInternals,\n} from '@material/web/labs/behaviors/element-internals.js';\nimport { css, CSSResultGroup, html, LitElement, nothing, render } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { Dialog } from './internal/dialog.js';\nimport { IxDialogStyles } from './ix-dialog-styles.js';\nimport './md-dialog.js';\n\nconst ixDialogBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\nexport class IxDialog extends ixDialogBaseClass {\n /** @nocollapse */\n static styles: CSSResultGroup = [\n IxDialogStyles,\n css`\n :host([use-native-dialog]) dialog[open],\n :host([use-native-dialog][closing]) dialog {\n position: fixed;\n inset: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n display: block;\n inline-size: 100vw;\n block-size: 100dvh;\n pointer-events: none;\n z-index: 99;\n overscroll-behavior: contain;\n }\n\n :host([use-native-dialog]) dialog[open] .scrim,\n :host([use-native-dialog][closing]) .scrim,\n :host([use-native-dialog]) dialog[open] > .container,\n :host([use-native-dialog][closing]) dialog > .container {\n pointer-events: auto;\n }\n\n :host([use-native-dialog]) dialog[open] .scrim,\n :host([use-native-dialog][closing]) .scrim {\n position: fixed;\n inset: 0;\n background: var(--ix-dialog-scrim, rgba(0, 0, 0, 0.32));\n }\n\n :host([use-native-dialog]) dialog[open] .scrim {\n overscroll-behavior: contain;\n touch-action: none;\n }\n\n :host([use-native-dialog]) dialog[open] > .container,\n :host([use-native-dialog][closing]) dialog > .container {\n transform: translate(-50%, -50%);\n width: auto;\n height: auto;\n max-block-size: var(--ix-dialog-max-height, 90dvh);\n border-radius: 0.75rem;\n background: var(--ix-dialog-bg, #fff);\n box-shadow: var(\n --ix-dialog-shadow,\n 0 0.625rem 1.875rem rgba(0, 0, 0, 0.25)\n );\n display: grid;\n grid-template-rows: auto 1fr auto;\n overflow: hidden;\n z-index: 9;\n transform-origin: top center;\n will-change: transform, opacity;\n }\n\n :host([use-native-dialog]) .headline,\n :host([use-native-dialog]) .content,\n :host([use-native-dialog]) .actions {\n padding: var(--ix-dialog-section-padding, 1rem);\n }\n\n :host([use-native-dialog]) .content {\n overflow: auto;\n }\n\n :host([use-native-dialog]) .actions {\n display: inline-flex;\n gap: var(--ix-dialog-actions-gap, 0.5rem);\n justify-content: flex-end;\n align-items: center;\n padding-block: var(--ix-dialog-actions-padding-block, 0.75rem);\n border-top: var(\n --ix-dialog-actions-border,\n 1px solid rgba(0, 0, 0, 0.08)\n );\n }\n\n @keyframes ix-fold-in {\n from {\n transform: translate(-50%, -50%) translateY(-0.5rem) scaleY(0.92);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -50%) translateY(0) scaleY(1);\n opacity: 1;\n }\n }\n @keyframes ix-fold-out {\n from {\n transform: translate(-50%, -50%) translateY(0) scaleY(1);\n opacity: 1;\n }\n to {\n transform: translate(-50%, -50%) translateY(-0.5rem) scaleY(0.98);\n opacity: 0;\n }\n }\n\n :host([use-native-dialog]:not([closing])) dialog[open] > .container {\n animation: ix-fold-in var(--ix-dialog-in-dur, 1000ms)\n cubic-bezier(0.2, 0.7, 0.3, 1) both;\n }\n :host([use-native-dialog][closing]) dialog > .container {\n animation: ix-fold-out var(--ix-dialog-out-dur, 250ms)\n cubic-bezier(0.2, 0.7, 0.3, 1) both;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([use-native-dialog]) dialog > .container {\n animation: none !important;\n }\n }\n `,\n ];\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.dialog') readonly component!: Dialog;\n\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ type: Boolean, attribute: 'prevent-cancel' }) preventCancel =\n false;\n\n @property({ type: Boolean }) preventCloseOnScrimClick = false;\n\n @property({ type: Boolean }) disableNextClickIsFromContent = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'use-native-dialog' })\n useNativeDialog = false;\n\n @property({ type: Boolean }) allowOverflow = false;\n\n /**\n * Used in conjunction with `useNativeDialog`\n */\n @property({ type: Object }) contentStyles?: CSSResultGroup;\n\n @state() private nativeClosing = false;\n\n private dialogRef: Ref<HTMLDialogElement> = createRef();\n\n private containerRef: Ref<HTMLDivElement> = createRef();\n\n private portalHost?: HTMLElement;\n\n private portalRoot?: ShadowRoot;\n\n private portalStyleEl?: HTMLStyleElement;\n\n private pointerDownInside = false;\n\n private isScrollLocked = false;\n\n private scrollYBackup = 0;\n\n private removeScrollHandlers?: () => void;\n\n private nativeOnEnd?: () => void;\n\n private mo?: MutationObserver;\n\n private get nativeDialog(): HTMLDialogElement | null {\n return this.dialogRef.value ?? null;\n }\n\n private get nativeDialogContainer(): HTMLDivElement | null {\n return this.containerRef.value ?? null;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.mo = new MutationObserver(() => {\n if (this.useNativeDialog && this.open) this.populatePortal();\n });\n this.mo.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n characterData: true,\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.mo?.disconnect();\n this.unlockScroll();\n this.teardownPortal();\n }\n\n updated(changed: Map<string, unknown>) {\n if (!this.useNativeDialog) return;\n if (changed.has('open')) {\n if (this.open) {\n this.ensurePortal();\n if (this.portalRoot) {\n this.attachPortalStyles();\n render(this.portalTemplate(), this.portalRoot);\n this.populatePortal();\n }\n if (this.nativeClosing) {\n this.nativeClosing = false;\n this.nativeDialogContainer?.classList.remove('closing');\n if (this.nativeOnEnd && this.nativeDialogContainer) {\n this.nativeDialogContainer.removeEventListener(\n 'animationend',\n this.nativeOnEnd\n );\n }\n this.nativeOnEnd = undefined;\n }\n this.dispatchEvent(\n new Event('open', { bubbles: true, composed: true })\n );\n this.lockScroll();\n requestAnimationFrame(() => {\n this.nativeDialog?.show();\n requestAnimationFrame(() => {\n this.dispatchEvent(\n new Event('opened', { bubbles: true, composed: true })\n );\n });\n });\n } else {\n this.startNativeCloseAnimation();\n }\n }\n }\n\n public dismiss() {\n if (!this.open) return;\n Promise.resolve().then(() => {\n this.requestClose();\n });\n }\n\n private startNativeCloseAnimation() {\n if (this.nativeClosing) return;\n this.nativeClosing = true;\n this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));\n\n const finish = () => {\n this.nativeDialogContainer?.classList.remove('closing');\n this.nativeClosing = false;\n this.nativeDialog?.close();\n this.unlockScroll();\n this.dispatchEvent(\n new Event('closed', { bubbles: true, composed: true })\n );\n this.moveNodesBackFromPortal();\n this.teardownPortal();\n };\n\n const container = this.nativeDialogContainer;\n if (!container) {\n finish();\n return;\n }\n\n container.classList.add('closing');\n\n let done = false;\n const onEnd = () => {\n if (done) return;\n done = true;\n container.removeEventListener('animationend', onEnd);\n finish();\n };\n this.nativeOnEnd = onEnd;\n container.addEventListener('animationend', onEnd, { once: true });\n\n window.setTimeout(onEnd, 1);\n }\n\n private ensurePortal() {\n if (this.portalRoot) return;\n const host = document.createElement('ix-dialog-portal-host');\n const root = host.attachShadow({ mode: 'open' });\n if (this.shadowRoot && 'adoptedStyleSheets' in this.shadowRoot) {\n (root as any).adoptedStyleSheets = (\n this.shadowRoot as any\n ).adoptedStyleSheets;\n }\n document.body.appendChild(host);\n this.portalHost = host;\n this.portalRoot = root;\n }\n\n private attachPortalStyles() {\n if (!this.portalRoot || this.portalStyleEl) return;\n const style = document.createElement('style');\n\n const portalLayoutStyles = `\n dialog {\n position: fixed;\n inset: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n display: grid;\n place-items: center;\n pointer-events: none;\n z-index: 1000;\n max-width: none !important;\n max-height: none !important;\n }\n .scrim {\n position: fixed;\n inset: 0;\n background: var(--ix-dialog-scrim, rgba(0,0,0,0.5));\n pointer-events: auto;\n z-index: 1000;\n touch-action: none;\n border: 0;\n padding: 0;\n appearance: none;\n }\n .container {\n position: relative;\n border-radius: 0.75rem;\n background: var(--ix-dialog-bg, #fff);\n box-shadow: var(--ix-dialog-shadow, 0 10px 30px rgba(0,0,0,0.25));\n display: grid;\n grid-template-rows: auto 1fr auto;\n overflow: visible;\n pointer-events: auto;\n z-index: 1001;\n max-width: none!important;\n }\n .container .content {\n overflow: visible;\n }\n @media (prefers-reduced-motion: reduce) {\n dialog > .container { animation: none !important; }\n }\n `;\n\n if (this.contentStyles) {\n const stylesArray: CSSResultGroup[] = Array.isArray(this.contentStyles)\n ? this.contentStyles\n : [this.contentStyles];\n const customContentStyles = stylesArray\n .map(contentStyle => {\n if (typeof contentStyle === 'object' && 'cssText' in contentStyle) {\n return contentStyle.cssText;\n }\n return '';\n })\n .join('\\n');\n\n style.textContent = customContentStyles + portalLayoutStyles;\n } else {\n style.textContent = portalLayoutStyles;\n }\n\n this.portalRoot.append(style);\n this.portalStyleEl = style;\n }\n\n private teardownPortal() {\n if (!this.portalHost) return;\n if (this.portalRoot) render(nothing, this.portalRoot);\n this.portalStyleEl?.remove();\n this.portalStyleEl = undefined;\n this.portalHost.remove();\n this.portalRoot = undefined;\n this.portalHost = undefined;\n }\n\n private moveNodesToPortal(slotName: string, targetSelector: string) {\n if (!this.nativeDialogContainer) return;\n const target = this.nativeDialogContainer.querySelector(targetSelector);\n if (!target) return;\n const nodes = Array.from(this.children).filter(\n el => el instanceof HTMLElement && el.slot === slotName\n );\n nodes.forEach(n => target.appendChild(n));\n }\n\n private moveNodesBackFromPortal() {\n if (!this.nativeDialogContainer) return;\n const h = this.nativeDialogContainer.querySelector('.headline');\n const b = this.nativeDialogContainer.querySelector('.content');\n const a = this.nativeDialogContainer.querySelector('.actions');\n [h, b, a].forEach(container => {\n if (!container) return;\n const children = Array.from(container.childNodes);\n children.forEach(n => this.appendChild(n));\n });\n }\n\n private populatePortal() {\n this.moveNodesToPortal('headline', '.headline');\n this.moveNodesToPortal('content', '.content');\n this.moveNodesToPortal('actions', '.actions');\n }\n\n private onKeydown = (e: KeyboardEvent) => {\n if (e.key !== 'Escape') return;\n if (this.preventCancel) {\n e.preventDefault();\n return;\n }\n const cancelEvt = new Event('cancel', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n const prevented = !this.dispatchEvent(cancelEvt);\n if (prevented) {\n e.preventDefault();\n return;\n }\n this.requestClose();\n };\n\n private onNativeCancel = (e: Event) => {\n const forwarded = new Event('cancel', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n const prevented = !this.dispatchEvent(forwarded);\n if (prevented) {\n e.preventDefault();\n return;\n }\n this.requestClose();\n };\n\n private requestClose() {\n this.open = false;\n }\n\n private onScrimClick = () => {\n if (!this.preventCloseOnScrimClick) this.requestClose();\n };\n\n private lockScroll() {\n if (this.isScrollLocked) return;\n this.isScrollLocked = true;\n this.scrollYBackup =\n window.scrollY || document.documentElement.scrollTop || 0;\n const { body } = document;\n const scrollbarWidth =\n window.innerWidth - document.documentElement.clientWidth;\n if (scrollbarWidth > 0) {\n body.style.paddingRight = `${scrollbarWidth}px`;\n }\n body.style.overflow = 'hidden';\n body.style.position = 'fixed';\n body.style.top = `-${this.scrollYBackup}px`;\n body.style.left = '0';\n body.style.right = '0';\n body.style.width = '100%';\n const stopIfOutside = (ev: Event) => {\n const t = ev.target as Node | null;\n if (!this.nativeDialogContainer || !t) return;\n if (!this.nativeDialogContainer.contains(t)) ev.preventDefault();\n };\n const onTouchMove = (e: TouchEvent) => stopIfOutside(e);\n const onKeyDown = (e: KeyboardEvent) => {\n const keys = [\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End',\n 'ArrowUp',\n 'ArrowDown',\n ' ',\n ];\n if (!keys.includes(e.key)) return;\n const t = e.target as Node | null;\n if (!this.nativeDialogContainer || !t) return;\n if (!this.nativeDialogContainer.contains(t)) e.preventDefault();\n };\n window.addEventListener('touchmove', onTouchMove, { passive: false });\n window.addEventListener('keydown', onKeyDown, { passive: false });\n this.removeScrollHandlers = () => {\n window.removeEventListener('touchmove', onTouchMove as any);\n window.removeEventListener('keydown', onKeyDown as any);\n };\n }\n\n private unlockScroll() {\n if (!this.isScrollLocked) return;\n this.isScrollLocked = false;\n if (this.removeScrollHandlers) {\n this.removeScrollHandlers();\n this.removeScrollHandlers = undefined;\n }\n const { body } = document;\n body.style.paddingRight = '';\n body.style.position = '';\n body.style.top = '';\n body.style.left = '';\n body.style.right = '';\n body.style.overflow = '';\n body.style.width = '';\n window.scrollTo(0, this.scrollYBackup || 0);\n }\n\n onOpen() {\n this.dispatchEvent(new Event('open'));\n this.lockScroll();\n }\n\n onOpened() {\n this.dispatchEvent(new Event('opened'));\n }\n\n onClose() {\n this.dispatchEvent(new Event('close'));\n }\n\n onClosed() {\n this.dispatchEvent(new Event('closed'));\n this.unlockScroll();\n }\n\n onCancel(e: Event) {\n if (this.preventCancel) e.preventDefault();\n this.dispatchEvent(new Event('cancel', { bubbles: true, composed: true }));\n }\n\n private portalTemplate() {\n return html`\n <dialog\n ${ref(this.dialogRef)}\n @cancel=${this.onNativeCancel}\n @keydown=${this.onKeydown}\n >\n <button\n class=\"scrim\"\n type=\"button\"\n aria-label=\"Close dialog\"\n @click=${this.onScrimClick}\n ></button>\n <div\n class=\"container\"\n ${ref(this.containerRef)}\n role=\"dialog\"\n aria-modal=\"true\"\n >\n <div class=\"headline\"></div>\n <div class=\"content\"></div>\n <div class=\"actions\"></div>\n </div>\n </dialog>\n `;\n }\n\n private renderMdDialog() {\n if (this.portalHost) {\n this.moveNodesBackFromPortal();\n this.teardownPortal();\n }\n return html`<md-dialog\n ?open=${this.open}\n class=\"dialog\"\n ?preventCloseOnScrimClick=${this.preventCloseOnScrimClick}\n ?disableNextClickIsFromContent=${this.disableNextClickIsFromContent}\n ?allowOverflow=${this.allowOverflow}\n @open=${this.onOpen}\n @opened=${this.onOpened}\n @close=${this.onClose}\n @closed=${this.onClosed}\n @cancel=${this.onCancel}\n >\n <slot slot=\"headline\" name=\"headline\"></slot>\n <slot slot=\"content\" name=\"content\"></slot>\n <slot slot=\"actions\" name=\"actions\"></slot>\n </md-dialog>`;\n }\n\n private renderNativeDialog() {\n if (this.portalRoot) {\n render(this.portalTemplate(), this.portalRoot);\n this.populatePortal();\n }\n return nothing;\n }\n\n render() {\n return this.useNativeDialog\n ? this.renderNativeDialog()\n : this.renderMdDialog();\n }\n}\n"]}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import '@material/web/divider/divider.js';
|
|
7
7
|
import { LitElement } from 'lit';
|
|
8
8
|
import { DialogAnimation } from '@material/web/dialog/internal/animations.js';
|
|
9
|
+
declare const dialogBaseClass: import("@material/web/labs/behaviors/mixin").MixinReturn<typeof LitElement, object>;
|
|
9
10
|
/**
|
|
10
11
|
* A dialog component.
|
|
11
12
|
*
|
|
@@ -16,16 +17,16 @@ import { DialogAnimation } from '@material/web/dialog/internal/animations.js';
|
|
|
16
17
|
* @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
|
|
17
18
|
* on the scrim or pressing Escape.
|
|
18
19
|
*/
|
|
19
|
-
export declare class Dialog extends
|
|
20
|
+
export declare class Dialog extends dialogBaseClass {
|
|
20
21
|
/**
|
|
21
22
|
* Opens the dialog when set to `true` and closes it when set to `false`.
|
|
22
23
|
*/
|
|
23
24
|
get open(): boolean;
|
|
24
25
|
set open(open: boolean);
|
|
25
26
|
/**
|
|
26
|
-
*
|
|
27
|
+
* Skips the opening and closing animations.
|
|
27
28
|
*/
|
|
28
|
-
|
|
29
|
+
quick: boolean;
|
|
29
30
|
/**
|
|
30
31
|
* Gets or sets the dialog's return value, usually to indicate which button
|
|
31
32
|
* a user pressed to close it.
|
|
@@ -38,7 +39,19 @@ export declare class Dialog extends LitElement {
|
|
|
38
39
|
* dialog as an alert dialog.
|
|
39
40
|
*/
|
|
40
41
|
type?: 'alert';
|
|
41
|
-
|
|
42
|
+
/**
|
|
43
|
+
* Disables focus trapping, which by default keeps keyboard Tab navigation
|
|
44
|
+
* within the dialog.
|
|
45
|
+
*
|
|
46
|
+
* When disabled, after focusing the last element of a dialog, pressing Tab
|
|
47
|
+
* again will release focus from the window back to the browser (such as the
|
|
48
|
+
* URL bar).
|
|
49
|
+
*
|
|
50
|
+
* Focus trapping is recommended for accessibility, and should not typically
|
|
51
|
+
* be disabled. Only turn this off if the use case of a dialog is more
|
|
52
|
+
* accessible without focus trapping.
|
|
53
|
+
*/
|
|
54
|
+
noFocusTrap: boolean;
|
|
42
55
|
allowOverflow: boolean;
|
|
43
56
|
/**
|
|
44
57
|
* Gets the opening animation for a dialog. Set to a new function to customize
|
|
@@ -65,18 +78,21 @@ export declare class Dialog extends LitElement {
|
|
|
65
78
|
private readonly scroller;
|
|
66
79
|
private readonly topAnchor;
|
|
67
80
|
private readonly bottomAnchor;
|
|
81
|
+
private readonly firstFocusTrap;
|
|
68
82
|
private nextClickIsFromContent;
|
|
69
83
|
private intersectionObserver?;
|
|
70
84
|
private hasHeadline;
|
|
71
85
|
private hasActions;
|
|
72
86
|
private hasIcon;
|
|
87
|
+
private cancelAnimations?;
|
|
73
88
|
private escapePressedWithoutCancel;
|
|
89
|
+
private readonly treewalker;
|
|
74
90
|
constructor();
|
|
75
91
|
/**
|
|
76
92
|
* Opens the dialog and fires a cancelable `open` event. After a dialog's
|
|
77
93
|
* animation, an `opened` event is fired.
|
|
78
94
|
*
|
|
79
|
-
* Add an `
|
|
95
|
+
* Add an `autofocus` attribute to a child of the dialog that should
|
|
80
96
|
* receive focus after opening.
|
|
81
97
|
*
|
|
82
98
|
* @return A Promise that resolves after the animation is finished and the
|
|
@@ -110,4 +126,7 @@ export declare class Dialog extends LitElement {
|
|
|
110
126
|
private handleIconChange;
|
|
111
127
|
private handleAnchorIntersection;
|
|
112
128
|
private getIsConnectedPromise;
|
|
129
|
+
private handleFocusTrapFocus;
|
|
130
|
+
private getFirstAndLastFocusableChildren;
|
|
113
131
|
}
|
|
132
|
+
export {};
|
package/dist/internal/dialog.js
CHANGED
|
@@ -10,9 +10,11 @@ import '@material/web/divider/divider.js';
|
|
|
10
10
|
import { html, isServer, LitElement, nothing } from 'lit';
|
|
11
11
|
import { property, query, state } from 'lit/decorators.js';
|
|
12
12
|
import { classMap } from 'lit/directives/class-map.js';
|
|
13
|
-
import {
|
|
13
|
+
import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
|
|
14
14
|
import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
|
|
15
15
|
import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from '@material/web/dialog/internal/animations.js';
|
|
16
|
+
// Separate variable needed for closure.
|
|
17
|
+
const dialogBaseClass = mixinDelegatesAria(LitElement);
|
|
16
18
|
/**
|
|
17
19
|
* A dialog component.
|
|
18
20
|
*
|
|
@@ -23,7 +25,10 @@ import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from '
|
|
|
23
25
|
* @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
|
|
24
26
|
* on the scrim or pressing Escape.
|
|
25
27
|
*/
|
|
26
|
-
export class Dialog extends
|
|
28
|
+
export class Dialog extends dialogBaseClass {
|
|
29
|
+
// We do not use `delegatesFocus: true` due to a Chromium bug with
|
|
30
|
+
// selecting text.
|
|
31
|
+
// See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
|
|
27
32
|
/**
|
|
28
33
|
* Opens the dialog when set to `true` and closes it when set to `false`.
|
|
29
34
|
*/
|
|
@@ -47,9 +52,9 @@ export class Dialog extends LitElement {
|
|
|
47
52
|
constructor() {
|
|
48
53
|
super();
|
|
49
54
|
/**
|
|
50
|
-
*
|
|
55
|
+
* Skips the opening and closing animations.
|
|
51
56
|
*/
|
|
52
|
-
this.
|
|
57
|
+
this.quick = false;
|
|
53
58
|
/**
|
|
54
59
|
* Gets or sets the dialog's return value, usually to indicate which button
|
|
55
60
|
* a user pressed to close it.
|
|
@@ -57,7 +62,19 @@ export class Dialog extends LitElement {
|
|
|
57
62
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
|
|
58
63
|
*/
|
|
59
64
|
this.returnValue = '';
|
|
60
|
-
|
|
65
|
+
/**
|
|
66
|
+
* Disables focus trapping, which by default keeps keyboard Tab navigation
|
|
67
|
+
* within the dialog.
|
|
68
|
+
*
|
|
69
|
+
* When disabled, after focusing the last element of a dialog, pressing Tab
|
|
70
|
+
* again will release focus from the window back to the browser (such as the
|
|
71
|
+
* URL bar).
|
|
72
|
+
*
|
|
73
|
+
* Focus trapping is recommended for accessibility, and should not typically
|
|
74
|
+
* be disabled. Only turn this off if the use case of a dialog is more
|
|
75
|
+
* accessible without focus trapping.
|
|
76
|
+
*/
|
|
77
|
+
this.noFocusTrap = false;
|
|
61
78
|
this.allowOverflow = false;
|
|
62
79
|
/**
|
|
63
80
|
* Gets the opening animation for a dialog. Set to a new function to customize
|
|
@@ -93,36 +110,22 @@ export class Dialog extends LitElement {
|
|
|
93
110
|
// in Chromium is fixed to fire 'cancel' with one escape press and close with
|
|
94
111
|
// multiple.
|
|
95
112
|
this.escapePressedWithoutCancel = false;
|
|
113
|
+
// This TreeWalker is used to walk through a dialog's children to find
|
|
114
|
+
// focusable elements. TreeWalker is faster than `querySelectorAll('*')`.
|
|
115
|
+
// We check for isServer because there isn't a "document" during an SSR
|
|
116
|
+
// run.
|
|
117
|
+
this.treewalker = isServer
|
|
118
|
+
? null
|
|
119
|
+
: document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);
|
|
96
120
|
if (!isServer) {
|
|
97
121
|
this.addEventListener('submit', this.handleSubmit);
|
|
98
|
-
// We do not use `delegatesFocus: true` due to a Chromium bug with
|
|
99
|
-
// selecting text.
|
|
100
|
-
// See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
|
|
101
|
-
//
|
|
102
|
-
// Material requires using focus trapping within the dialog (see
|
|
103
|
-
// b/314840853 for the bug to add it). This would normally mean we don't
|
|
104
|
-
// care about delegating focus since the `<dialog>` never receives it.
|
|
105
|
-
// However, we still need to handle situations when a user has not
|
|
106
|
-
// provided an focusable child in the content. When that happens, the
|
|
107
|
-
// `<dialog>` itself is focused.
|
|
108
|
-
//
|
|
109
|
-
// Listen to focus/blur instead of focusin/focusout since those can bubble
|
|
110
|
-
// from content.
|
|
111
|
-
this.addEventListener('focus', () => {
|
|
112
|
-
var _a;
|
|
113
|
-
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.focus();
|
|
114
|
-
});
|
|
115
|
-
this.addEventListener('blur', () => {
|
|
116
|
-
var _a;
|
|
117
|
-
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.blur();
|
|
118
|
-
});
|
|
119
122
|
}
|
|
120
123
|
}
|
|
121
124
|
/**
|
|
122
125
|
* Opens the dialog and fires a cancelable `open` event. After a dialog's
|
|
123
126
|
* animation, an `opened` event is fired.
|
|
124
127
|
*
|
|
125
|
-
* Add an `
|
|
128
|
+
* Add an `autofocus` attribute to a child of the dialog that should
|
|
126
129
|
* receive focus after opening.
|
|
127
130
|
*
|
|
128
131
|
* @return A Promise that resolves after the animation is finished and the
|
|
@@ -144,6 +147,7 @@ export class Dialog extends LitElement {
|
|
|
144
147
|
const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
|
|
145
148
|
if (preventOpen) {
|
|
146
149
|
this.open = false;
|
|
150
|
+
this.isOpening = false;
|
|
147
151
|
return;
|
|
148
152
|
}
|
|
149
153
|
// All Material dialogs are modal.
|
|
@@ -211,11 +215,21 @@ export class Dialog extends LitElement {
|
|
|
211
215
|
'has-headline': this.hasHeadline,
|
|
212
216
|
'has-actions': this.hasActions,
|
|
213
217
|
'has-icon': this.hasIcon,
|
|
214
|
-
scrollable,
|
|
218
|
+
'scrollable': scrollable,
|
|
215
219
|
'show-top-divider': scrollable && !this.isAtScrollTop,
|
|
216
220
|
'show-bottom-divider': scrollable && !this.isAtScrollBottom,
|
|
217
221
|
'allow-overflow': this.allowOverflow,
|
|
218
222
|
};
|
|
223
|
+
// The focus trap sentinels are only added after the dialog opens, since
|
|
224
|
+
// dialog.showModal() will try to autofocus them, even with tabindex="-1".
|
|
225
|
+
const showFocusTrap = this.open && !this.noFocusTrap;
|
|
226
|
+
const focusTrap = html `
|
|
227
|
+
<div
|
|
228
|
+
class="focus-trap"
|
|
229
|
+
tabindex="0"
|
|
230
|
+
aria-hidden="true"
|
|
231
|
+
@focus=${this.handleFocusTrapFocus}></div>
|
|
232
|
+
`;
|
|
219
233
|
const { ariaLabel } = this;
|
|
220
234
|
return html `
|
|
221
235
|
<div class="scrim"></div>
|
|
@@ -228,9 +242,9 @@ export class Dialog extends LitElement {
|
|
|
228
242
|
@click=${this.handleDialogClick}
|
|
229
243
|
@close=${this.handleClose}
|
|
230
244
|
@keydown=${this.handleKeydown}
|
|
231
|
-
.returnValue=${this.returnValue || nothing}
|
|
232
|
-
|
|
233
|
-
<div class="container" @
|
|
245
|
+
.returnValue=${this.returnValue || nothing}>
|
|
246
|
+
${showFocusTrap ? focusTrap : nothing}
|
|
247
|
+
<div class="container" @click=${this.handleContentClick}>
|
|
234
248
|
<div class="headline">
|
|
235
249
|
<div class="icon" aria-hidden="true">
|
|
236
250
|
<slot name="icon" @slotchange=${this.handleIconChange}></slot>
|
|
@@ -238,8 +252,7 @@ export class Dialog extends LitElement {
|
|
|
238
252
|
<h2 id="headline" aria-hidden=${!this.hasHeadline || nothing}>
|
|
239
253
|
<slot
|
|
240
254
|
name="headline"
|
|
241
|
-
@slotchange=${this.handleHeadlineChange}
|
|
242
|
-
></slot>
|
|
255
|
+
@slotchange=${this.handleHeadlineChange}></slot>
|
|
243
256
|
</h2>
|
|
244
257
|
<md-divider></md-divider>
|
|
245
258
|
</div>
|
|
@@ -255,11 +268,12 @@ export class Dialog extends LitElement {
|
|
|
255
268
|
<slot name="actions" @slotchange=${this.handleActionsChange}></slot>
|
|
256
269
|
</div>
|
|
257
270
|
</div>
|
|
271
|
+
${showFocusTrap ? focusTrap : nothing}
|
|
258
272
|
</dialog>
|
|
259
273
|
`;
|
|
260
274
|
}
|
|
261
275
|
firstUpdated() {
|
|
262
|
-
this.intersectionObserver = new IntersectionObserver(entries => {
|
|
276
|
+
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
263
277
|
for (const entry of entries) {
|
|
264
278
|
this.handleAnchorIntersection(entry);
|
|
265
279
|
}
|
|
@@ -267,22 +281,13 @@ export class Dialog extends LitElement {
|
|
|
267
281
|
this.intersectionObserver.observe(this.topAnchor);
|
|
268
282
|
this.intersectionObserver.observe(this.bottomAnchor);
|
|
269
283
|
}
|
|
270
|
-
handleDialogClick(
|
|
271
|
-
|
|
272
|
-
if (e.composedPath().includes(container)) {
|
|
273
|
-
// Ignore clicks on the dialog itself.
|
|
274
|
-
return;
|
|
275
|
-
}
|
|
276
|
-
if (this.nextClickIsFromContent && !this.disableNextClickIsFromContent) {
|
|
284
|
+
handleDialogClick() {
|
|
285
|
+
if (this.nextClickIsFromContent) {
|
|
277
286
|
// Avoid doing a layout calculation below if we know the click came from
|
|
278
287
|
// content.
|
|
279
288
|
this.nextClickIsFromContent = false;
|
|
280
289
|
return;
|
|
281
290
|
}
|
|
282
|
-
// If preventCloseOnScrimClick is true, do not close the dialog when clicking on the scrim
|
|
283
|
-
if (this.preventCloseOnScrimClick) {
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
291
|
// Click originated on the backdrop. Native `<dialog>`s will not cancel,
|
|
287
292
|
// but Material dialogs do.
|
|
288
293
|
const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
|
|
@@ -298,7 +303,7 @@ export class Dialog extends LitElement {
|
|
|
298
303
|
var _a;
|
|
299
304
|
const form = event.target;
|
|
300
305
|
const { submitter } = event;
|
|
301
|
-
if (form.method !== 'dialog' || !submitter) {
|
|
306
|
+
if (form.getAttribute('method') !== 'dialog' || !submitter) {
|
|
302
307
|
return;
|
|
303
308
|
}
|
|
304
309
|
// Close reason is the submitter's value attribute, or the dialog's
|
|
@@ -342,6 +347,16 @@ export class Dialog extends LitElement {
|
|
|
342
347
|
});
|
|
343
348
|
}
|
|
344
349
|
async animateDialog(animation) {
|
|
350
|
+
var _a;
|
|
351
|
+
// Always cancel the previous animations. Animations can include `fill`
|
|
352
|
+
// modes that need to be cleared when `quick` is toggled. If not, content
|
|
353
|
+
// that faded out will remain hidden when a `quick` dialog re-opens after
|
|
354
|
+
// previously opening and closing without `quick`.
|
|
355
|
+
(_a = this.cancelAnimations) === null || _a === void 0 ? void 0 : _a.abort();
|
|
356
|
+
this.cancelAnimations = new AbortController();
|
|
357
|
+
if (this.quick) {
|
|
358
|
+
return;
|
|
359
|
+
}
|
|
345
360
|
const { dialog, scrim, container, headline, content, actions } = this;
|
|
346
361
|
if (!dialog || !scrim || !container || !headline || !content || !actions) {
|
|
347
362
|
return;
|
|
@@ -358,10 +373,16 @@ export class Dialog extends LitElement {
|
|
|
358
373
|
const animations = [];
|
|
359
374
|
for (const [element, animation] of elementAndAnimation) {
|
|
360
375
|
for (const animateArgs of animation) {
|
|
361
|
-
|
|
376
|
+
const animation = element.animate(...animateArgs);
|
|
377
|
+
this.cancelAnimations.signal.addEventListener('abort', () => {
|
|
378
|
+
animation.cancel();
|
|
379
|
+
});
|
|
380
|
+
animations.push(animation);
|
|
362
381
|
}
|
|
363
382
|
}
|
|
364
|
-
await Promise.all(animations.map(animation => animation.finished)
|
|
383
|
+
await Promise.all(animations.map((animation) => animation.finished.catch(() => {
|
|
384
|
+
// Ignore intentional AbortErrors when calling `animation.cancel()`.
|
|
385
|
+
})));
|
|
365
386
|
}
|
|
366
387
|
handleHeadlineChange(event) {
|
|
367
388
|
const slot = event.target;
|
|
@@ -385,20 +406,83 @@ export class Dialog extends LitElement {
|
|
|
385
406
|
}
|
|
386
407
|
}
|
|
387
408
|
getIsConnectedPromise() {
|
|
388
|
-
return new Promise(resolve => {
|
|
409
|
+
return new Promise((resolve) => {
|
|
389
410
|
this.isConnectedPromiseResolve = resolve;
|
|
390
411
|
});
|
|
391
412
|
}
|
|
413
|
+
handleFocusTrapFocus(event) {
|
|
414
|
+
var _a;
|
|
415
|
+
const [firstFocusableChild, lastFocusableChild] = this.getFirstAndLastFocusableChildren();
|
|
416
|
+
if (!firstFocusableChild || !lastFocusableChild) {
|
|
417
|
+
// When a dialog does not have focusable children, the dialog itself
|
|
418
|
+
// receives focus.
|
|
419
|
+
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.focus();
|
|
420
|
+
return;
|
|
421
|
+
}
|
|
422
|
+
// To determine which child to focus, we need to know which focus trap
|
|
423
|
+
// received focus...
|
|
424
|
+
const isFirstFocusTrap = event.target === this.firstFocusTrap;
|
|
425
|
+
const isLastFocusTrap = !isFirstFocusTrap;
|
|
426
|
+
// ...and where the focus came from (what was previously focused).
|
|
427
|
+
const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild;
|
|
428
|
+
const focusCameFromLastChild = event.relatedTarget === lastFocusableChild;
|
|
429
|
+
// Although this is a focus trap, focus can come from outside the trap.
|
|
430
|
+
// This can happen when elements are programmatically `focus()`'d. It also
|
|
431
|
+
// happens when focus leaves and returns to the window, such as clicking on
|
|
432
|
+
// the browser's URL bar and pressing Tab, or switching focus between
|
|
433
|
+
// iframes.
|
|
434
|
+
const focusCameFromOutsideDialog = !focusCameFromFirstChild && !focusCameFromLastChild;
|
|
435
|
+
// Focus the dialog's first child when we reach the end of the dialog and
|
|
436
|
+
// focus is moving forward. Or, when focus is moving forwards into the
|
|
437
|
+
// dialog from outside of the window.
|
|
438
|
+
const shouldFocusFirstChild = (isLastFocusTrap && focusCameFromLastChild) ||
|
|
439
|
+
(isFirstFocusTrap && focusCameFromOutsideDialog);
|
|
440
|
+
if (shouldFocusFirstChild) {
|
|
441
|
+
firstFocusableChild.focus();
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
// Focus the dialog's last child when we reach the beginning of the dialog
|
|
445
|
+
// and focus is moving backward. Or, when focus is moving backwards into the
|
|
446
|
+
// dialog from outside of the window.
|
|
447
|
+
const shouldFocusLastChild = (isFirstFocusTrap && focusCameFromFirstChild) ||
|
|
448
|
+
(isLastFocusTrap && focusCameFromOutsideDialog);
|
|
449
|
+
if (shouldFocusLastChild) {
|
|
450
|
+
lastFocusableChild.focus();
|
|
451
|
+
}
|
|
452
|
+
// The booleans above are verbose for readability, but code executation
|
|
453
|
+
// won't actually reach here.
|
|
454
|
+
}
|
|
455
|
+
getFirstAndLastFocusableChildren() {
|
|
456
|
+
if (!this.treewalker) {
|
|
457
|
+
return [null, null];
|
|
458
|
+
}
|
|
459
|
+
let firstFocusableChild = null;
|
|
460
|
+
let lastFocusableChild = null;
|
|
461
|
+
// Reset the current node back to the root host element.
|
|
462
|
+
this.treewalker.currentNode = this.treewalker.root;
|
|
463
|
+
while (this.treewalker.nextNode()) {
|
|
464
|
+
// Cast as Element since the TreeWalker filter only accepts Elements.
|
|
465
|
+
const nextChild = this.treewalker.currentNode;
|
|
466
|
+
if (!isFocusable(nextChild)) {
|
|
467
|
+
continue;
|
|
468
|
+
}
|
|
469
|
+
if (!firstFocusableChild) {
|
|
470
|
+
firstFocusableChild = nextChild;
|
|
471
|
+
}
|
|
472
|
+
lastFocusableChild = nextChild;
|
|
473
|
+
}
|
|
474
|
+
// We set lastFocusableChild immediately after finding a
|
|
475
|
+
// firstFocusableChild, which means the pair is either both null or both
|
|
476
|
+
// non-null. Cast since TypeScript does not recognize this.
|
|
477
|
+
return [firstFocusableChild, lastFocusableChild];
|
|
478
|
+
}
|
|
392
479
|
}
|
|
393
|
-
(() => {
|
|
394
|
-
requestUpdateOnAriaChange(Dialog);
|
|
395
|
-
})();
|
|
396
480
|
__decorate([
|
|
397
481
|
property({ type: Boolean })
|
|
398
482
|
], Dialog.prototype, "open", null);
|
|
399
483
|
__decorate([
|
|
400
484
|
property({ type: Boolean })
|
|
401
|
-
], Dialog.prototype, "
|
|
485
|
+
], Dialog.prototype, "quick", void 0);
|
|
402
486
|
__decorate([
|
|
403
487
|
property({ attribute: false })
|
|
404
488
|
], Dialog.prototype, "returnValue", void 0);
|
|
@@ -406,8 +490,8 @@ __decorate([
|
|
|
406
490
|
property()
|
|
407
491
|
], Dialog.prototype, "type", void 0);
|
|
408
492
|
__decorate([
|
|
409
|
-
property({ type: Boolean })
|
|
410
|
-
], Dialog.prototype, "
|
|
493
|
+
property({ type: Boolean, attribute: 'no-focus-trap' })
|
|
494
|
+
], Dialog.prototype, "noFocusTrap", void 0);
|
|
411
495
|
__decorate([
|
|
412
496
|
property({ type: Boolean })
|
|
413
497
|
], Dialog.prototype, "allowOverflow", void 0);
|
|
@@ -444,6 +528,9 @@ __decorate([
|
|
|
444
528
|
__decorate([
|
|
445
529
|
query('.bottom.anchor')
|
|
446
530
|
], Dialog.prototype, "bottomAnchor", void 0);
|
|
531
|
+
__decorate([
|
|
532
|
+
query('.focus-trap')
|
|
533
|
+
], Dialog.prototype, "firstFocusTrap", void 0);
|
|
447
534
|
__decorate([
|
|
448
535
|
state()
|
|
449
536
|
], Dialog.prototype, "hasHeadline", void 0);
|
|
@@ -453,4 +540,29 @@ __decorate([
|
|
|
453
540
|
__decorate([
|
|
454
541
|
state()
|
|
455
542
|
], Dialog.prototype, "hasIcon", void 0);
|
|
543
|
+
function isFocusable(element) {
|
|
544
|
+
var _a, _b;
|
|
545
|
+
// Check if the element is a known built-in focusable element:
|
|
546
|
+
// - <a> and <area> with `href` attributes.
|
|
547
|
+
// - Form controls that are not disabled.
|
|
548
|
+
// - `contenteditable` elements.
|
|
549
|
+
// - Anything with a non-negative `tabindex`.
|
|
550
|
+
const knownFocusableElements = ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])';
|
|
551
|
+
const notDisabled = ':not(:disabled,[disabled])';
|
|
552
|
+
const notNegativeTabIndex = ':not([tabindex^="-"])';
|
|
553
|
+
if (element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex)) {
|
|
554
|
+
return true;
|
|
555
|
+
}
|
|
556
|
+
const isCustomElement = element.localName.includes('-');
|
|
557
|
+
if (!isCustomElement) {
|
|
558
|
+
return false;
|
|
559
|
+
}
|
|
560
|
+
// If a custom element does not have a tabindex, it may still be focusable
|
|
561
|
+
// if it delegates focus with a shadow root. We also need to check again if
|
|
562
|
+
// the custom element is a disabled form control.
|
|
563
|
+
if (!element.matches(notDisabled)) {
|
|
564
|
+
return false;
|
|
565
|
+
}
|
|
566
|
+
return (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.delegatesFocus) !== null && _b !== void 0 ? _b : false;
|
|
567
|
+
}
|
|
456
568
|
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/internal/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable class-methods-use-this */\n/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\n\nimport { html, isServer, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';\n\nimport {\n DIALOG_DEFAULT_CLOSE_ANIMATION,\n DIALOG_DEFAULT_OPEN_ANIMATION,\n DialogAnimation,\n DialogAnimationArgs,\n} from '@material/web/dialog/internal/animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n static {\n requestUpdateOnAriaChange(Dialog);\n }\n\n /**\n * Opens the dialog when set to `true` and closes it when set to `false`.\n */\n @property({ type: Boolean })\n get open() {\n return this.isOpen;\n }\n\n set open(open: boolean) {\n if (open === this.isOpen) {\n return;\n }\n\n this.isOpen = open;\n if (open) {\n this.setAttribute('open', '');\n this.show();\n } else {\n this.removeAttribute('open');\n this.close();\n }\n }\n\n /**\n * When set to `true`, prevents the dialog from closing when clicking on the scrim\n */\n @property({ type: Boolean }) preventCloseOnScrimClick = false;\n\n /**\n * Gets or sets the dialog's return value, usually to indicate which button\n * a user pressed to close it.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n */\n @property({ attribute: false }) returnValue = '';\n\n /**\n * The type of dialog for accessibility. Set this to `alert` to announce a\n * dialog as an alert dialog.\n */\n @property() type?: 'alert';\n\n @property({ type: Boolean }) disableNextClickIsFromContent = false;\n\n @property({ type: Boolean }) allowOverflow = false;\n\n /**\n * Gets the opening animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n /**\n * Gets the closing animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n private isOpen = false;\n\n private isOpening = false;\n\n // getIsConnectedPromise() immediately sets the resolve property.\n private isConnectedPromiseResolve!: () => void;\n\n private isConnectedPromise = this.getIsConnectedPromise();\n\n @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n\n @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n\n @query('.container') private readonly container!: HTMLDialogElement | null;\n\n @query('.headline') private readonly headline!: HTMLDialogElement | null;\n\n @query('.content') private readonly content!: HTMLDialogElement | null;\n\n @query('.actions') private readonly actions!: HTMLDialogElement | null;\n\n @state() private isAtScrollTop = false;\n\n @state() private isAtScrollBottom = false;\n\n @query('.scroller') private readonly scroller!: HTMLElement | null;\n\n @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n\n @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n\n private nextClickIsFromContent = false;\n\n private intersectionObserver?: IntersectionObserver;\n\n // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n @state() private hasHeadline = false;\n\n @state() private hasActions = false;\n\n @state() private hasIcon = false;\n\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224\n // Chrome v120 has a bug where escape keys do not trigger cancels. If we get\n // a dialog \"close\" event that is triggered without a \"cancel\" after an escape\n // keydown, then we need to manually trigger our closing logic.\n //\n // This bug occurs when pressing escape to close a dialog without first\n // interacting with the dialog's content.\n //\n // Cleanup tracking:\n // https://github.com/material-components/material-web/issues/5330\n // This can be removed when full CloseWatcher support added and the above bug\n // in Chromium is fixed to fire 'cancel' with one escape press and close with\n // multiple.\n private escapePressedWithoutCancel = false;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('submit', this.handleSubmit);\n\n // We do not use `delegatesFocus: true` due to a Chromium bug with\n // selecting text.\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357\n //\n // Material requires using focus trapping within the dialog (see\n // b/314840853 for the bug to add it). This would normally mean we don't\n // care about delegating focus since the `<dialog>` never receives it.\n // However, we still need to handle situations when a user has not\n // provided an focusable child in the content. When that happens, the\n // `<dialog>` itself is focused.\n //\n // Listen to focus/blur instead of focusin/focusout since those can bubble\n // from content.\n this.addEventListener('focus', () => {\n this.dialog?.focus();\n });\n this.addEventListener('blur', () => {\n this.dialog?.blur();\n });\n }\n }\n\n /**\n * Opens the dialog and fires a cancelable `open` event. After a dialog's\n * animation, an `opened` event is fired.\n *\n * Add an `autocomplete` attribute to a child of the dialog that should\n * receive focus after opening.\n *\n * @return A Promise that resolves after the animation is finished and the\n * `opened` event was fired.\n */\n async show() {\n this.isOpening = true;\n // Dialogs can be opened before being attached to the DOM, so we need to\n // wait until we're connected before calling `showModal()`.\n await this.isConnectedPromise;\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already opened or if `dialog.close()` was called while awaiting.\n if (dialog.open || !this.isOpening) {\n this.isOpening = false;\n return;\n }\n\n const preventOpen = !this.dispatchEvent(\n new Event('open', { cancelable: true })\n );\n if (preventOpen) {\n this.open = false;\n return;\n }\n\n // All Material dialogs are modal.\n dialog.showModal();\n this.open = true;\n // Reset scroll position if re-opening a dialog with the same content.\n if (this.scroller) {\n this.scroller.scrollTop = 0;\n }\n // Native modal dialogs ignore autofocus and instead force focus to the\n // first focusable child. Override this behavior if there is a child with\n // an autofocus attribute.\n this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n await this.animateDialog(this.getOpenAnimation());\n this.dispatchEvent(new Event('opened'));\n this.isOpening = false;\n }\n\n /**\n * Closes the dialog and fires a cancelable `close` event. After a dialog's\n * animation, a `closed` event is fired.\n *\n * @param returnValue A return value usually indicating which button was used\n * to close a dialog. If a dialog is canceled by clicking the scrim or\n * pressing Escape, it will not change the return value after closing.\n * @return A Promise that resolves after the animation is finished and the\n * `closed` event was fired.\n */\n async close(returnValue = this.returnValue) {\n this.isOpening = false;\n if (!this.isConnected) {\n // Disconnected dialogs do not fire close events or animate.\n this.open = false;\n return;\n }\n\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already closed or if `dialog.show()` was called while awaiting.\n if (!dialog.open || this.isOpening) {\n this.open = false;\n return;\n }\n\n const prevReturnValue = this.returnValue;\n this.returnValue = returnValue;\n const preventClose = !this.dispatchEvent(\n new Event('close', { cancelable: true })\n );\n if (preventClose) {\n this.returnValue = prevReturnValue;\n return;\n }\n\n await this.animateDialog(this.getCloseAnimation());\n dialog.close(returnValue);\n this.open = false;\n this.dispatchEvent(new Event('closed'));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.isConnectedPromiseResolve();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.isConnectedPromise = this.getIsConnectedPromise();\n }\n\n protected override render() {\n const scrollable =\n this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n const classes = {\n 'has-headline': this.hasHeadline,\n 'has-actions': this.hasActions,\n 'has-icon': this.hasIcon,\n scrollable,\n 'show-top-divider': scrollable && !this.isAtScrollTop,\n 'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n 'allow-overflow': this.allowOverflow,\n };\n\n const { ariaLabel } = this as ARIAMixinStrict;\n return html`\n <div class=\"scrim\"></div>\n <dialog\n class=${classMap(classes)}\n aria-label=${ariaLabel || nothing}\n aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n role=${this.type === 'alert' ? 'alertdialog' : nothing}\n @cancel=${this.handleCancel}\n @click=${this.handleDialogClick}\n @close=${this.handleClose}\n @keydown=${this.handleKeydown}\n .returnValue=${this.returnValue || nothing}\n >\n <div class=\"container\" @mousedown=${this.handleContentClick}>\n <div class=\"headline\">\n <div class=\"icon\" aria-hidden=\"true\">\n <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n </div>\n <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n <slot\n name=\"headline\"\n @slotchange=${this.handleHeadlineChange}\n ></slot>\n </h2>\n <md-divider></md-divider>\n </div>\n <div class=\"scroller\">\n <div class=\"content\">\n <div class=\"top anchor\"></div>\n <slot name=\"content\"></slot>\n <div class=\"bottom anchor\"></div>\n </div>\n </div>\n <div class=\"actions\">\n <md-divider></md-divider>\n <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n </div>\n </div>\n </dialog>\n `;\n }\n\n protected override firstUpdated() {\n this.intersectionObserver = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n this.handleAnchorIntersection(entry);\n }\n },\n { root: this.scroller! }\n );\n\n this.intersectionObserver.observe(this.topAnchor!);\n this.intersectionObserver.observe(this.bottomAnchor!);\n }\n\n private handleDialogClick(e: MouseEvent) {\n const container = this.container as EventTarget;\n if (e.composedPath().includes(container)) {\n // Ignore clicks on the dialog itself.\n return;\n }\n\n if (this.nextClickIsFromContent && !this.disableNextClickIsFromContent) {\n // Avoid doing a layout calculation below if we know the click came from\n // content.\n this.nextClickIsFromContent = false;\n return;\n }\n\n // If preventCloseOnScrimClick is true, do not close the dialog when clicking on the scrim\n if (this.preventCloseOnScrimClick) {\n return;\n }\n\n // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n // but Material dialogs do.\n const preventDefault = !this.dispatchEvent(\n new Event('cancel', { cancelable: true })\n );\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private handleContentClick() {\n this.nextClickIsFromContent = true;\n }\n\n private handleSubmit(event: SubmitEvent) {\n const form = event.target as HTMLFormElement;\n const { submitter } = event;\n if (form.method !== 'dialog' || !submitter) {\n return;\n }\n\n // Close reason is the submitter's value attribute, or the dialog's\n // `returnValue` if there is no attribute.\n this.close(submitter.getAttribute('value') ?? this.returnValue);\n }\n\n private handleCancel(event: Event) {\n if (event.target !== this.dialog) {\n // Ignore any cancel events dispatched by content.\n return;\n }\n\n this.escapePressedWithoutCancel = false;\n const preventDefault = !redispatchEvent(this, event);\n // We always prevent default on the original dialog event since we'll\n // animate closing it before it actually closes.\n event.preventDefault();\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private handleClose() {\n if (!this.escapePressedWithoutCancel) {\n return;\n }\n\n this.escapePressedWithoutCancel = false;\n this.dialog?.dispatchEvent(new Event('cancel', { cancelable: true }));\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape') {\n return;\n }\n\n // An escape key was pressed. If a \"close\" event fires next without a\n // \"cancel\" event first, then we know we're in the Chrome v120 bug.\n this.escapePressedWithoutCancel = true;\n // Wait a full task for the cancel/close event listeners to fire, then\n // reset the flag.\n setTimeout(() => {\n this.escapePressedWithoutCancel = false;\n });\n }\n\n private async animateDialog(animation: DialogAnimation) {\n const { dialog, scrim, container, headline, content, actions } = this;\n if (!dialog || !scrim || !container || !headline || !content || !actions) {\n return;\n }\n\n const {\n container: containerAnimate,\n dialog: dialogAnimate,\n scrim: scrimAnimate,\n headline: headlineAnimate,\n content: contentAnimate,\n actions: actionsAnimate,\n } = animation;\n\n const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n [dialog, dialogAnimate ?? []],\n [scrim, scrimAnimate ?? []],\n [container, containerAnimate ?? []],\n [headline, headlineAnimate ?? []],\n [content, contentAnimate ?? []],\n [actions, actionsAnimate ?? []],\n ];\n\n const animations: Animation[] = [];\n for (const [element, animation] of elementAndAnimation) {\n for (const animateArgs of animation) {\n animations.push(element.animate(...animateArgs));\n }\n }\n\n await Promise.all(animations.map(animation => animation.finished));\n }\n\n private handleHeadlineChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasHeadline = slot.assignedElements().length > 0;\n }\n\n private handleActionsChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasActions = slot.assignedElements().length > 0;\n }\n\n private handleIconChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasIcon = slot.assignedElements().length > 0;\n }\n\n private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n const { target, isIntersecting } = entry;\n if (target === this.topAnchor) {\n this.isAtScrollTop = isIntersecting;\n }\n\n if (target === this.bottomAnchor) {\n this.isAtScrollBottom = isIntersecting;\n }\n }\n\n private getIsConnectedPromise() {\n return new Promise<void>(resolve => {\n this.isConnectedPromiseResolve = resolve;\n });\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/internal/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable class-methods-use-this */\n/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\n\nimport { html, isServer, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';\n\nimport {\n DIALOG_DEFAULT_CLOSE_ANIMATION,\n DIALOG_DEFAULT_OPEN_ANIMATION,\n DialogAnimation,\n DialogAnimationArgs,\n} from '@material/web/dialog/internal/animations.js';\n\n// Separate variable needed for closure.\nconst dialogBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends dialogBaseClass {\n // We do not use `delegatesFocus: true` due to a Chromium bug with\n // selecting text.\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357\n\n /**\n * Opens the dialog when set to `true` and closes it when set to `false`.\n */\n @property({type: Boolean})\n get open() {\n return this.isOpen;\n }\n\n set open(open: boolean) {\n if (open === this.isOpen) {\n return;\n }\n\n this.isOpen = open;\n if (open) {\n this.setAttribute('open', '');\n this.show();\n } else {\n this.removeAttribute('open');\n this.close();\n }\n }\n\n /**\n * Skips the opening and closing animations.\n */\n @property({type: Boolean}) quick = false;\n\n /**\n * Gets or sets the dialog's return value, usually to indicate which button\n * a user pressed to close it.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n */\n @property({attribute: false}) returnValue = '';\n\n /**\n * The type of dialog for accessibility. Set this to `alert` to announce a\n * dialog as an alert dialog.\n */\n @property() type?: 'alert';\n\n /**\n * Disables focus trapping, which by default keeps keyboard Tab navigation\n * within the dialog.\n *\n * When disabled, after focusing the last element of a dialog, pressing Tab\n * again will release focus from the window back to the browser (such as the\n * URL bar).\n *\n * Focus trapping is recommended for accessibility, and should not typically\n * be disabled. Only turn this off if the use case of a dialog is more\n * accessible without focus trapping.\n */\n @property({type: Boolean, attribute: 'no-focus-trap'})\n noFocusTrap = false;\n\n @property({ type: Boolean }) allowOverflow = false;\n\n /**\n * Gets the opening animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n /**\n * Gets the closing animation for a dialog. Set to a new function to customize\n * the animation.\n */\n getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n private isOpen = false;\n\n private isOpening = false;\n\n // getIsConnectedPromise() immediately sets the resolve property.\n private isConnectedPromiseResolve!: () => void;\n\n private isConnectedPromise = this.getIsConnectedPromise();\n\n @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n\n @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n\n @query('.container') private readonly container!: HTMLDialogElement | null;\n\n @query('.headline') private readonly headline!: HTMLDialogElement | null;\n\n @query('.content') private readonly content!: HTMLDialogElement | null;\n\n @query('.actions') private readonly actions!: HTMLDialogElement | null;\n\n @state() private isAtScrollTop = false;\n\n @state() private isAtScrollBottom = false;\n\n @query('.scroller') private readonly scroller!: HTMLElement | null;\n\n @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n\n @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n\n @query('.focus-trap')\n private readonly firstFocusTrap!: HTMLElement | null;\n\n private nextClickIsFromContent = false;\n\n private intersectionObserver?: IntersectionObserver;\n\n // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n @state() private hasHeadline = false;\n\n @state() private hasActions = false;\n\n @state() private hasIcon = false;\n\n private cancelAnimations?: AbortController;\n\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224\n // Chrome v120 has a bug where escape keys do not trigger cancels. If we get\n // a dialog \"close\" event that is triggered without a \"cancel\" after an escape\n // keydown, then we need to manually trigger our closing logic.\n //\n // This bug occurs when pressing escape to close a dialog without first\n // interacting with the dialog's content.\n //\n // Cleanup tracking:\n // https://github.com/material-components/material-web/issues/5330\n // This can be removed when full CloseWatcher support added and the above bug\n // in Chromium is fixed to fire 'cancel' with one escape press and close with\n // multiple.\n private escapePressedWithoutCancel = false;\n\n // This TreeWalker is used to walk through a dialog's children to find\n // focusable elements. TreeWalker is faster than `querySelectorAll('*')`.\n // We check for isServer because there isn't a \"document\" during an SSR\n // run.\n private readonly treewalker = isServer\n ? null\n : document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('submit', this.handleSubmit);\n }\n }\n\n /**\n * Opens the dialog and fires a cancelable `open` event. After a dialog's\n * animation, an `opened` event is fired.\n *\n * Add an `autofocus` attribute to a child of the dialog that should\n * receive focus after opening.\n *\n * @return A Promise that resolves after the animation is finished and the\n * `opened` event was fired.\n */\n async show() {\n this.isOpening = true;\n // Dialogs can be opened before being attached to the DOM, so we need to\n // wait until we're connected before calling `showModal()`.\n await this.isConnectedPromise;\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already opened or if `dialog.close()` was called while awaiting.\n if (dialog.open || !this.isOpening) {\n this.isOpening = false;\n return;\n }\n\n const preventOpen = !this.dispatchEvent(\n new Event('open', {cancelable: true}),\n );\n if (preventOpen) {\n this.open = false;\n this.isOpening = false;\n return;\n }\n\n // All Material dialogs are modal.\n dialog.showModal();\n this.open = true;\n // Reset scroll position if re-opening a dialog with the same content.\n if (this.scroller) {\n this.scroller.scrollTop = 0;\n }\n // Native modal dialogs ignore autofocus and instead force focus to the\n // first focusable child. Override this behavior if there is a child with\n // an autofocus attribute.\n this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n await this.animateDialog(this.getOpenAnimation());\n this.dispatchEvent(new Event('opened'));\n this.isOpening = false;\n }\n\n /**\n * Closes the dialog and fires a cancelable `close` event. After a dialog's\n * animation, a `closed` event is fired.\n *\n * @param returnValue A return value usually indicating which button was used\n * to close a dialog. If a dialog is canceled by clicking the scrim or\n * pressing Escape, it will not change the return value after closing.\n * @return A Promise that resolves after the animation is finished and the\n * `closed` event was fired.\n */\n async close(returnValue = this.returnValue) {\n this.isOpening = false;\n if (!this.isConnected) {\n // Disconnected dialogs do not fire close events or animate.\n this.open = false;\n return;\n }\n\n await this.updateComplete;\n const dialog = this.dialog!;\n // Check if already closed or if `dialog.show()` was called while awaiting.\n if (!dialog.open || this.isOpening) {\n this.open = false;\n return;\n }\n\n const prevReturnValue = this.returnValue;\n this.returnValue = returnValue;\n const preventClose = !this.dispatchEvent(\n new Event('close', {cancelable: true}),\n );\n if (preventClose) {\n this.returnValue = prevReturnValue;\n return;\n }\n\n await this.animateDialog(this.getCloseAnimation());\n dialog.close(returnValue);\n this.open = false;\n this.dispatchEvent(new Event('closed'));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.isConnectedPromiseResolve();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.isConnectedPromise = this.getIsConnectedPromise();\n }\n\n protected override render() {\n const scrollable =\n this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n const classes = {\n 'has-headline': this.hasHeadline,\n 'has-actions': this.hasActions,\n 'has-icon': this.hasIcon,\n 'scrollable': scrollable,\n 'show-top-divider': scrollable && !this.isAtScrollTop,\n 'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n 'allow-overflow': this.allowOverflow,\n };\n\n // The focus trap sentinels are only added after the dialog opens, since\n // dialog.showModal() will try to autofocus them, even with tabindex=\"-1\".\n const showFocusTrap = this.open && !this.noFocusTrap;\n const focusTrap = html`\n <div\n class=\"focus-trap\"\n tabindex=\"0\"\n aria-hidden=\"true\"\n @focus=${this.handleFocusTrapFocus}></div>\n `;\n\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <div class=\"scrim\"></div>\n <dialog\n class=${classMap(classes)}\n aria-label=${ariaLabel || nothing}\n aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n role=${this.type === 'alert' ? 'alertdialog' : nothing}\n @cancel=${this.handleCancel}\n @click=${this.handleDialogClick}\n @close=${this.handleClose}\n @keydown=${this.handleKeydown}\n .returnValue=${this.returnValue || nothing}>\n ${showFocusTrap ? focusTrap : nothing}\n <div class=\"container\" @click=${this.handleContentClick}>\n <div class=\"headline\">\n <div class=\"icon\" aria-hidden=\"true\">\n <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n </div>\n <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n <slot\n name=\"headline\"\n @slotchange=${this.handleHeadlineChange}></slot>\n </h2>\n <md-divider></md-divider>\n </div>\n <div class=\"scroller\">\n <div class=\"content\">\n <div class=\"top anchor\"></div>\n <slot name=\"content\"></slot>\n <div class=\"bottom anchor\"></div>\n </div>\n </div>\n <div class=\"actions\">\n <md-divider></md-divider>\n <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n </div>\n </div>\n ${showFocusTrap ? focusTrap : nothing}\n </dialog>\n `;\n }\n\n protected override firstUpdated() {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n this.handleAnchorIntersection(entry);\n }\n },\n {root: this.scroller!},\n );\n\n this.intersectionObserver.observe(this.topAnchor!);\n this.intersectionObserver.observe(this.bottomAnchor!);\n }\n\n private handleDialogClick() {\n if (this.nextClickIsFromContent) {\n // Avoid doing a layout calculation below if we know the click came from\n // content.\n this.nextClickIsFromContent = false;\n return;\n }\n\n // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n // but Material dialogs do.\n const preventDefault = !this.dispatchEvent(\n new Event('cancel', {cancelable: true}),\n );\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private handleContentClick() {\n this.nextClickIsFromContent = true;\n }\n\n private handleSubmit(event: SubmitEvent) {\n const form = event.target as HTMLFormElement;\n const {submitter} = event;\n if (form.getAttribute('method') !== 'dialog' || !submitter) {\n return;\n }\n\n // Close reason is the submitter's value attribute, or the dialog's\n // `returnValue` if there is no attribute.\n this.close(submitter.getAttribute('value') ?? this.returnValue);\n }\n\n private handleCancel(event: Event) {\n if (event.target !== this.dialog) {\n // Ignore any cancel events dispatched by content.\n return;\n }\n\n this.escapePressedWithoutCancel = false;\n const preventDefault = !redispatchEvent(this, event);\n // We always prevent default on the original dialog event since we'll\n // animate closing it before it actually closes.\n event.preventDefault();\n if (preventDefault) {\n return;\n }\n\n this.close();\n }\n\n private handleClose() {\n if (!this.escapePressedWithoutCancel) {\n return;\n }\n\n this.escapePressedWithoutCancel = false;\n this.dialog?.dispatchEvent(new Event('cancel', {cancelable: true}));\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape') {\n return;\n }\n\n // An escape key was pressed. If a \"close\" event fires next without a\n // \"cancel\" event first, then we know we're in the Chrome v120 bug.\n this.escapePressedWithoutCancel = true;\n // Wait a full task for the cancel/close event listeners to fire, then\n // reset the flag.\n setTimeout(() => {\n this.escapePressedWithoutCancel = false;\n });\n }\n\n private async animateDialog(animation: DialogAnimation) {\n // Always cancel the previous animations. Animations can include `fill`\n // modes that need to be cleared when `quick` is toggled. If not, content\n // that faded out will remain hidden when a `quick` dialog re-opens after\n // previously opening and closing without `quick`.\n this.cancelAnimations?.abort();\n this.cancelAnimations = new AbortController();\n if (this.quick) {\n return;\n }\n\n const {dialog, scrim, container, headline, content, actions} = this;\n if (!dialog || !scrim || !container || !headline || !content || !actions) {\n return;\n }\n\n const {\n container: containerAnimate,\n dialog: dialogAnimate,\n scrim: scrimAnimate,\n headline: headlineAnimate,\n content: contentAnimate,\n actions: actionsAnimate,\n } = animation;\n\n const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n [dialog, dialogAnimate ?? []],\n [scrim, scrimAnimate ?? []],\n [container, containerAnimate ?? []],\n [headline, headlineAnimate ?? []],\n [content, contentAnimate ?? []],\n [actions, actionsAnimate ?? []],\n ];\n\n const animations: Animation[] = [];\n for (const [element, animation] of elementAndAnimation) {\n for (const animateArgs of animation) {\n const animation = element.animate(...animateArgs);\n this.cancelAnimations.signal.addEventListener('abort', () => {\n animation.cancel();\n });\n\n animations.push(animation);\n }\n }\n\n await Promise.all(\n animations.map((animation) =>\n animation.finished.catch(() => {\n // Ignore intentional AbortErrors when calling `animation.cancel()`.\n }),\n ),\n );\n }\n\n private handleHeadlineChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasHeadline = slot.assignedElements().length > 0;\n }\n\n private handleActionsChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasActions = slot.assignedElements().length > 0;\n }\n\n private handleIconChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n this.hasIcon = slot.assignedElements().length > 0;\n }\n\n private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n const {target, isIntersecting} = entry;\n if (target === this.topAnchor) {\n this.isAtScrollTop = isIntersecting;\n }\n\n if (target === this.bottomAnchor) {\n this.isAtScrollBottom = isIntersecting;\n }\n }\n\n private getIsConnectedPromise() {\n return new Promise<void>((resolve) => {\n this.isConnectedPromiseResolve = resolve;\n });\n }\n\n private handleFocusTrapFocus(event: FocusEvent) {\n const [firstFocusableChild, lastFocusableChild] =\n this.getFirstAndLastFocusableChildren();\n if (!firstFocusableChild || !lastFocusableChild) {\n // When a dialog does not have focusable children, the dialog itself\n // receives focus.\n this.dialog?.focus();\n return;\n }\n\n // To determine which child to focus, we need to know which focus trap\n // received focus...\n const isFirstFocusTrap = event.target === this.firstFocusTrap;\n const isLastFocusTrap = !isFirstFocusTrap;\n // ...and where the focus came from (what was previously focused).\n const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild;\n const focusCameFromLastChild = event.relatedTarget === lastFocusableChild;\n // Although this is a focus trap, focus can come from outside the trap.\n // This can happen when elements are programmatically `focus()`'d. It also\n // happens when focus leaves and returns to the window, such as clicking on\n // the browser's URL bar and pressing Tab, or switching focus between\n // iframes.\n const focusCameFromOutsideDialog =\n !focusCameFromFirstChild && !focusCameFromLastChild;\n\n // Focus the dialog's first child when we reach the end of the dialog and\n // focus is moving forward. Or, when focus is moving forwards into the\n // dialog from outside of the window.\n const shouldFocusFirstChild =\n (isLastFocusTrap && focusCameFromLastChild) ||\n (isFirstFocusTrap && focusCameFromOutsideDialog);\n if (shouldFocusFirstChild) {\n firstFocusableChild.focus();\n return;\n }\n\n // Focus the dialog's last child when we reach the beginning of the dialog\n // and focus is moving backward. Or, when focus is moving backwards into the\n // dialog from outside of the window.\n const shouldFocusLastChild =\n (isFirstFocusTrap && focusCameFromFirstChild) ||\n (isLastFocusTrap && focusCameFromOutsideDialog);\n if (shouldFocusLastChild) {\n lastFocusableChild.focus();\n \n }\n\n // The booleans above are verbose for readability, but code executation\n // won't actually reach here.\n }\n\n private getFirstAndLastFocusableChildren():\n | [HTMLElement, HTMLElement]\n | [null, null] {\n if (!this.treewalker) {\n return [null, null];\n }\n\n let firstFocusableChild: HTMLElement | null = null;\n let lastFocusableChild: HTMLElement | null = null;\n\n // Reset the current node back to the root host element.\n this.treewalker.currentNode = this.treewalker.root;\n while (this.treewalker.nextNode()) {\n // Cast as Element since the TreeWalker filter only accepts Elements.\n const nextChild = this.treewalker.currentNode as Element;\n if (!isFocusable(nextChild)) {\n continue;\n }\n\n if (!firstFocusableChild) {\n firstFocusableChild = nextChild;\n }\n\n lastFocusableChild = nextChild;\n }\n\n // We set lastFocusableChild immediately after finding a\n // firstFocusableChild, which means the pair is either both null or both\n // non-null. Cast since TypeScript does not recognize this.\n return [firstFocusableChild, lastFocusableChild] as\n | [HTMLElement, HTMLElement]\n | [null, null];\n }\n}\n\nfunction isFocusable(element: Element): element is HTMLElement {\n // Check if the element is a known built-in focusable element:\n // - <a> and <area> with `href` attributes.\n // - Form controls that are not disabled.\n // - `contenteditable` elements.\n // - Anything with a non-negative `tabindex`.\n const knownFocusableElements =\n ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])';\n const notDisabled = ':not(:disabled,[disabled])';\n const notNegativeTabIndex = ':not([tabindex^=\"-\"])';\n if (\n element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex)\n ) {\n return true;\n }\n\n const isCustomElement = element.localName.includes('-');\n if (!isCustomElement) {\n return false;\n }\n\n // If a custom element does not have a tabindex, it may still be focusable\n // if it delegates focus with a shadow root. We also need to check again if\n // the custom element is a disabled form control.\n if (!element.matches(notDisabled)) {\n return false;\n }\n\n return element.shadowRoot?.delegatesFocus ?? false;\n}\n"]}
|
package/dist/ix-dialog.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css,LitElement,isServer,nothing,html,render}from"lit";import{__decorate}from"tslib";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{property,query,state}from"lit/decorators.js";import{createRef,ref}from"lit/directives/ref.js";import"@material/web/divider/divider.js";import{classMap}from"lit/directives/class-map.js";import{redispatchEvent}from"@material/web/internal/events/redispatch-event.js";import{DIALOG_DEFAULT_OPEN_ANIMATION,DIALOG_DEFAULT_CLOSE_ANIMATION}from"@material/web/dialog/internal/animations.js";let IxDialogStyles=css`:host{display:contents}dialog{border:none;padding:0;margin:auto;max-width:90vw;max-height:90dvh;width:auto;background:0 0}dialog::backdrop{background:rgba(0,0,0,.32)}.container{box-sizing:border-box;background:var(--ix-dialog-bg,#fff);color:var(--ix-dialog-fg,inherit);border-radius:var(--ix-dialog-radius,.1875rem);max-width:var(--ix-dialog-max-width,45rem);overflow:hidden;box-shadow:var(--ix-dialog-shadow,0 12px 16px 0 rgba(0,0,0,.58))}.headline{padding:24px 24px 0 24px;font:var(--ix-dialog-headline-font,600 1.125rem/1.2 system-ui,sans-serif)}.content{padding:0;overflow:auto}.actions{display:flex;gap:.5rem;justify-content:flex-end}`;class Dialog extends LitElement{get open(){return this.isOpen}set open(e){e!==this.isOpen&&((this.isOpen=e)?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.preventCloseOnScrimClick=!1,this.returnValue="",this.disableNextClickIsFromContent=!1,this.allowOverflow=!1,this.getOpenAnimation=()=>DIALOG_DEFAULT_OPEN_ANIMATION,this.getCloseAnimation=()=>DIALOG_DEFAULT_CLOSE_ANIMATION,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,isServer||(this.addEventListener("submit",this.handleSubmit),this.addEventListener("focus",()=>{var e;null!=(e=this.dialog)&&e.focus()}),this.addEventListener("blur",()=>{var e;null!=(e=this.dialog)&&e.blur()}))}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;var e=this.dialog;e.open||!this.isOpening?this.isOpening=!1:!this.dispatchEvent(new Event("open",{cancelable:!0}))?this.open=!1:(e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),null!=(e=this.querySelector("[autofocus]"))&&e.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")),this.isOpening=!1)}async close(e=this.returnValue){var t,o;this.isOpening=!1,!this.isConnected||(await this.updateComplete,!(t=this.dialog).open)||this.isOpening?this.open=!1:(o=this.returnValue,this.returnValue=e,!this.dispatchEvent(new Event("close",{cancelable:!0}))?this.returnValue=o:(await this.animateDialog(this.getCloseAnimation()),t.close(e),this.open=!1,this.dispatchEvent(new Event("closed"))))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){var e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),e={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom,"allow-overflow":this.allowOverflow},t=this.ariaLabel;return html`<div class="scrim"></div><dialog class="${classMap(e)}" aria-label="${t||nothing}" aria-labelledby="${this.hasHeadline?"headline":nothing}" role="${"alert"===this.type?"alertdialog":nothing}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}" .returnValue="${this.returnValue||nothing}"><div class="container" @mousedown="${this.handleContentClick}"><div class="headline"><div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div><h2 id="headline" aria-hidden="${!this.hasHeadline||nothing}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2><md-divider></md-divider></div><div class="scroller"><div class="content"><div class="top anchor"></div><slot name="content"></slot><div class="bottom anchor"></div></div></div><div class="actions"><md-divider></md-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div></div></dialog>`}firstUpdated(){this.intersectionObserver=new IntersectionObserver(e=>{for(var t of e)this.handleAnchorIntersection(t)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(e){var t=this.container;e.composedPath().includes(t)||(this.nextClickIsFromContent&&!this.disableNextClickIsFromContent?this.nextClickIsFromContent=!1:!this.preventCloseOnScrimClick&&this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close())}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){var t=e.submitter;"dialog"===e.target.method&&t&&this.close(null!=(e=t.getAttribute("value"))?e:this.returnValue)}handleCancel(e){var t;e.target!==this.dialog||(this.escapePressedWithoutCancel=!1,t=!redispatchEvent(this,e),e.preventDefault(),t)||this.close()}handleClose(){var e;this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,null!=(e=this.dialog))&&e.dispatchEvent(new Event("cancel",{cancelable:!0}))}handleKeydown(e){"Escape"===e.key&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(e){var{dialog:o,scrim:i,container:a,headline:n,content:s,actions:l}=this;if(o&&i&&a&&n&&s&&l){var{container:r,dialog:d,scrim:c,headline:h,content:p,actions:v}=e,g=[];for(let[e,t]of[[o,null!=d?d:[]],[i,null!=c?c:[]],[a,null!=r?r:[]],[n,null!=h?h:[]],[s,null!=p?p:[]],[l,null!=v?v:[]]])for(var m of t)g.push(e.animate(...m));await Promise.all(g.map(e=>e.finished))}}handleHeadlineChange(e){e=e.target;this.hasHeadline=0<e.assignedElements().length}handleActionsChange(e){e=e.target;this.hasActions=0<e.assignedElements().length}handleIconChange(e){e=e.target;this.hasIcon=0<e.assignedElements().length}handleAnchorIntersection(e){var{target:e,isIntersecting:t}=e;e===this.topAnchor&&(this.isAtScrollTop=t),e===this.bottomAnchor&&(this.isAtScrollBottom=t)}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}}requestUpdateOnAriaChange(Dialog),__decorate([property({type:Boolean})],Dialog.prototype,"open",null),__decorate([property({type:Boolean})],Dialog.prototype,"preventCloseOnScrimClick",void 0),__decorate([property({attribute:!1})],Dialog.prototype,"returnValue",void 0),__decorate([property()],Dialog.prototype,"type",void 0),__decorate([property({type:Boolean})],Dialog.prototype,"disableNextClickIsFromContent",void 0),__decorate([property({type:Boolean})],Dialog.prototype,"allowOverflow",void 0),__decorate([query("dialog")],Dialog.prototype,"dialog",void 0),__decorate([query(".scrim")],Dialog.prototype,"scrim",void 0),__decorate([query(".container")],Dialog.prototype,"container",void 0),__decorate([query(".headline")],Dialog.prototype,"headline",void 0),__decorate([query(".content")],Dialog.prototype,"content",void 0),__decorate([query(".actions")],Dialog.prototype,"actions",void 0),__decorate([state()],Dialog.prototype,"isAtScrollTop",void 0),__decorate([state()],Dialog.prototype,"isAtScrollBottom",void 0),__decorate([query(".scroller")],Dialog.prototype,"scroller",void 0),__decorate([query(".top.anchor")],Dialog.prototype,"topAnchor",void 0),__decorate([query(".bottom.anchor")],Dialog.prototype,"bottomAnchor",void 0),__decorate([state()],Dialog.prototype,"hasHeadline",void 0),__decorate([state()],Dialog.prototype,"hasActions",void 0),__decorate([state()],Dialog.prototype,"hasIcon",void 0);let styles=css`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;box-shadow:0 12px 16px 0 rgba(0,0,0,.58);flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:visible;padding:0;width:inherit}dialog[open]{display:block}::backdrop{background:rgba(0,0,0,.5)}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color,var(--md-sys-color-on-surface,#1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font,var(--md-sys-typescale-headline-small-font,var(--md-ref-typeface-brand,Roboto)));font-size:var(--md-dialog-headline-size,var(--md-sys-typescale-headline-small-size,1.5rem));line-height:var(--md-dialog-headline-line-height,var(--md-sys-typescale-headline-small-line-height,2rem));font-weight:var(--md-dialog-headline-weight,var(--md-sys-typescale-headline-small-weight,var(--md-ref-typeface-weight-regular,400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color,var(--md-sys-color-secondary,#625b71));fill:currentColor;font-size:var(--md-dialog-icon-size,24px);margin-top:24px;height:var(--md-dialog-icon-size,24px);width:var(--md-dialog-icon-size,24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.allow-overflow .container{overflow:visible}.container::before{background:var(--md-dialog-container-color,var(--md-sys-color-surface-container-high,#ece6f0));border-radius:inherit;content:'';inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:initial;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--clr-on-surface,#092241);font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-actions.show-bottom-divider .actions md-divider,.has-headline.show-top-divider .headline md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media (forced-colors:active){dialog{outline:2px solid WindowText}}`;class MdDialog extends Dialog{}MdDialog.styles=[styles],window.customElements.define("md-dialog",MdDialog);class IxDialog extends LitElement{constructor(){super(...arguments),this.open=!1,this.preventCancel=!1,this.preventCloseOnScrimClick=!1,this.disableNextClickIsFromContent=!1,this.useNativeDialog=!1,this.allowOverflow=!1,this.nativeClosing=!1,this.dialogRef=createRef(),this.containerRef=createRef(),this.pointerDownInside=!1,this.isScrollLocked=!1,this.scrollYBackup=0,this.onKeydown=e=>{var t;"Escape"===e.key&&(this.preventCancel||(t=new Event("cancel",{bubbles:!0,composed:!0,cancelable:!0}),!this.dispatchEvent(t))?e.preventDefault():this.requestClose())},this.onNativeCancel=e=>{var t=new Event("cancel",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t)?this.requestClose():e.preventDefault()},this.onScrimClick=()=>{this.preventCloseOnScrimClick||this.requestClose()}}get nativeDialog(){var e;return null!=(e=this.dialogRef.value)?e:null}get nativeDialogContainer(){var e;return null!=(e=this.containerRef.value)?e:null}connectedCallback(){super.connectedCallback(),this.mo=new MutationObserver(()=>{this.useNativeDialog&&this.open&&this.populatePortal()}),this.mo.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0})}disconnectedCallback(){var e;super.disconnectedCallback(),null!=(e=this.mo)&&e.disconnect(),this.unlockScroll(),this.teardownPortal()}updated(e){this.useNativeDialog&&e.has("open")&&(this.open?(this.ensurePortal(),this.portalRoot&&(this.attachPortalStyles(),render(this.portalTemplate(),this.portalRoot),this.populatePortal()),this.nativeClosing&&(this.nativeClosing=!1,null!=(e=this.nativeDialogContainer)&&e.classList.remove("closing"),this.nativeOnEnd&&this.nativeDialogContainer&&this.nativeDialogContainer.removeEventListener("animationend",this.nativeOnEnd),this.nativeOnEnd=void 0),this.dispatchEvent(new Event("open",{bubbles:!0,composed:!0})),this.lockScroll(),requestAnimationFrame(()=>{var e;null!=(e=this.nativeDialog)&&e.show(),requestAnimationFrame(()=>{this.dispatchEvent(new Event("opened",{bubbles:!0,composed:!0}))})})):this.startNativeCloseAnimation())}dismiss(){this.open&&Promise.resolve().then(()=>{this.requestClose()})}startNativeCloseAnimation(){if(!this.nativeClosing){this.nativeClosing=!0,this.dispatchEvent(new Event("close",{bubbles:!0,composed:!0}));let o=()=>{var e;null!=(e=this.nativeDialogContainer)&&e.classList.remove("closing"),this.nativeClosing=!1,null!=(e=this.nativeDialog)&&e.close(),this.unlockScroll(),this.dispatchEvent(new Event("closed",{bubbles:!0,composed:!0})),this.moveNodesBackFromPortal(),this.teardownPortal()},i=this.nativeDialogContainer;if(i){i.classList.add("closing");let e=!1,t=()=>{e||(e=!0,i.removeEventListener("animationend",t),o())};this.nativeOnEnd=t,i.addEventListener("animationend",t,{once:!0}),window.setTimeout(t,1)}else o()}}ensurePortal(){var e,t;this.portalRoot||(t=(e=document.createElement("ix-dialog-portal-host")).attachShadow({mode:"open"}),this.shadowRoot&&"adoptedStyleSheets"in this.shadowRoot&&(t.adoptedStyleSheets=this.shadowRoot.adoptedStyleSheets),document.body.appendChild(e),this.portalHost=e,this.portalRoot=t)}attachPortalStyles(){var e,t,o;this.portalRoot&&!this.portalStyleEl&&(e=document.createElement("style"),t=`
|
|
1
|
+
import{css,LitElement,isServer,html,nothing,render}from"lit";import{__decorate}from"tslib";import{mixinDelegatesAria}from"@material/web/internal/aria/delegate.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.js";import{property,query,state}from"lit/decorators.js";import{createRef,ref}from"lit/directives/ref.js";import"@material/web/divider/divider.js";import{classMap}from"lit/directives/class-map.js";import{redispatchEvent}from"@material/web/internal/events/redispatch-event.js";import{DIALOG_DEFAULT_OPEN_ANIMATION,DIALOG_DEFAULT_CLOSE_ANIMATION}from"@material/web/dialog/internal/animations.js";let IxDialogStyles=css`:host{display:contents}dialog{border:none;padding:0;margin:auto;max-width:90vw;max-height:90dvh;width:auto;background:0 0}dialog::backdrop{background:rgba(0,0,0,.32)}.container{box-sizing:border-box;background:var(--ix-dialog-bg,#fff);color:var(--ix-dialog-fg,inherit);border-radius:var(--ix-dialog-radius,.1875rem);max-width:var(--ix-dialog-max-width,45rem);overflow:hidden;box-shadow:var(--ix-dialog-shadow,0 12px 16px 0 rgba(0,0,0,.58))}.headline{padding:24px 24px 0 24px;font:var(--ix-dialog-headline-font,600 1.125rem/1.2 system-ui,sans-serif)}.content{padding:0;overflow:auto}.actions{display:flex;gap:.5rem;justify-content:flex-end}`,dialogBaseClass=mixinDelegatesAria(LitElement);class Dialog extends dialogBaseClass{get open(){return this.isOpen}set open(e){e!==this.isOpen&&((this.isOpen=e)?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.quick=!1,this.returnValue="",this.noFocusTrap=!1,this.allowOverflow=!1,this.getOpenAnimation=()=>DIALOG_DEFAULT_OPEN_ANIMATION,this.getCloseAnimation=()=>DIALOG_DEFAULT_CLOSE_ANIMATION,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,this.treewalker=isServer?null:document.createTreeWalker(this,NodeFilter.SHOW_ELEMENT),isServer||this.addEventListener("submit",this.handleSubmit)}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;var e=this.dialog;!e.open&&this.isOpening&&(!this.dispatchEvent(new Event("open",{cancelable:!0}))?this.open=!1:(e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),null!=(e=this.querySelector("[autofocus]"))&&e.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")))),this.isOpening=!1}async close(e=this.returnValue){var t,o;this.isOpening=!1,!this.isConnected||(await this.updateComplete,!(t=this.dialog).open)||this.isOpening?this.open=!1:(o=this.returnValue,this.returnValue=e,!this.dispatchEvent(new Event("close",{cancelable:!0}))?this.returnValue=o:(await this.animateDialog(this.getCloseAnimation()),t.close(e),this.open=!1,this.dispatchEvent(new Event("closed"))))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){var e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),e={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom,"allow-overflow":this.allowOverflow},t=this.open&&!this.noFocusTrap,o=html`<div class="focus-trap" tabindex="0" aria-hidden="true" @focus="${this.handleFocusTrapFocus}"></div>`,i=this.ariaLabel;return html`<div class="scrim"></div><dialog class="${classMap(e)}" aria-label="${i||nothing}" aria-labelledby="${this.hasHeadline?"headline":nothing}" role="${"alert"===this.type?"alertdialog":nothing}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}" .returnValue="${this.returnValue||nothing}">${t?o:nothing}<div class="container" @click="${this.handleContentClick}"><div class="headline"><div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div><h2 id="headline" aria-hidden="${!this.hasHeadline||nothing}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2><md-divider></md-divider></div><div class="scroller"><div class="content"><div class="top anchor"></div><slot name="content"></slot><div class="bottom anchor"></div></div></div><div class="actions"><md-divider></md-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div></div>${t?o:nothing}</dialog>`}firstUpdated(){this.intersectionObserver=new IntersectionObserver(e=>{for(var t of e)this.handleAnchorIntersection(t)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(){this.nextClickIsFromContent?this.nextClickIsFromContent=!1:this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close()}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){var t=e.submitter;"dialog"===e.target.getAttribute("method")&&t&&this.close(null!=(e=t.getAttribute("value"))?e:this.returnValue)}handleCancel(e){var t;e.target!==this.dialog||(this.escapePressedWithoutCancel=!1,t=!redispatchEvent(this,e),e.preventDefault(),t)||this.close()}handleClose(){var e;this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,null!=(e=this.dialog))&&e.dispatchEvent(new Event("cancel",{cancelable:!0}))}handleKeydown(e){"Escape"===e.key&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(e){if(null!=(o=this.cancelAnimations)&&o.abort(),this.cancelAnimations=new AbortController,!this.quick){var{dialog:o,scrim:i,container:a,headline:n,content:s,actions:l}=this;if(o&&i&&a&&n&&s&&l){var{container:r,dialog:d,scrim:c,headline:h,content:p,actions:g}=e,v=[];for(let[t,e]of[[o,null!=d?d:[]],[i,null!=c?c:[]],[a,null!=r?r:[]],[n,null!=h?h:[]],[s,null!=p?p:[]],[l,null!=g?g:[]]])for(var m of e){let e=t.animate(...m);this.cancelAnimations.signal.addEventListener("abort",()=>{e.cancel()}),v.push(e)}await Promise.all(v.map(e=>e.finished.catch(()=>{})))}}}handleHeadlineChange(e){e=e.target;this.hasHeadline=0<e.assignedElements().length}handleActionsChange(e){e=e.target;this.hasActions=0<e.assignedElements().length}handleIconChange(e){e=e.target;this.hasIcon=0<e.assignedElements().length}handleAnchorIntersection(e){var{target:e,isIntersecting:t}=e;e===this.topAnchor&&(this.isAtScrollTop=t),e===this.bottomAnchor&&(this.isAtScrollBottom=t)}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}handleFocusTrapFocus(e){var t,o,i,a,[n,s]=this.getFirstAndLastFocusableChildren();n&&s?(t=e.target===this.firstFocusTrap,i=e.relatedTarget===s,a=!(e=e.relatedTarget===n)&&!i,(o=!t)&&i||t&&a?n.focus():(t&&e||o&&a)&&s.focus()):null!=(i=this.dialog)&&i.focus()}getFirstAndLastFocusableChildren(){if(!this.treewalker)return[null,null];let e=null,t=null;for(this.treewalker.currentNode=this.treewalker.root;this.treewalker.nextNode();){var o=this.treewalker.currentNode;isFocusable(o)&&(e=e||o,t=o)}return[e,t]}}function isFocusable(e){var t=":not(:disabled,[disabled])";return!!e.matches(":is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])"+t+':not([tabindex^="-"])')||!!e.localName.includes("-")&&!!e.matches(t)&&null!=(e=null==(t=e.shadowRoot)?void 0:t.delegatesFocus)&&e}__decorate([property({type:Boolean})],Dialog.prototype,"open",null),__decorate([property({type:Boolean})],Dialog.prototype,"quick",void 0),__decorate([property({attribute:!1})],Dialog.prototype,"returnValue",void 0),__decorate([property()],Dialog.prototype,"type",void 0),__decorate([property({type:Boolean,attribute:"no-focus-trap"})],Dialog.prototype,"noFocusTrap",void 0),__decorate([property({type:Boolean})],Dialog.prototype,"allowOverflow",void 0),__decorate([query("dialog")],Dialog.prototype,"dialog",void 0),__decorate([query(".scrim")],Dialog.prototype,"scrim",void 0),__decorate([query(".container")],Dialog.prototype,"container",void 0),__decorate([query(".headline")],Dialog.prototype,"headline",void 0),__decorate([query(".content")],Dialog.prototype,"content",void 0),__decorate([query(".actions")],Dialog.prototype,"actions",void 0),__decorate([state()],Dialog.prototype,"isAtScrollTop",void 0),__decorate([state()],Dialog.prototype,"isAtScrollBottom",void 0),__decorate([query(".scroller")],Dialog.prototype,"scroller",void 0),__decorate([query(".top.anchor")],Dialog.prototype,"topAnchor",void 0),__decorate([query(".bottom.anchor")],Dialog.prototype,"bottomAnchor",void 0),__decorate([query(".focus-trap")],Dialog.prototype,"firstFocusTrap",void 0),__decorate([state()],Dialog.prototype,"hasHeadline",void 0),__decorate([state()],Dialog.prototype,"hasActions",void 0),__decorate([state()],Dialog.prototype,"hasIcon",void 0);let styles=css`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;box-shadow:0 12px 16px 0 rgba(0,0,0,.58);flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:visible;padding:0;width:inherit}dialog[open]{display:block}::backdrop{background:rgba(0,0,0,.5)}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color,var(--md-sys-color-on-surface,#1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font,var(--md-sys-typescale-headline-small-font,var(--md-ref-typeface-brand,Roboto)));font-size:var(--md-dialog-headline-size,var(--md-sys-typescale-headline-small-size,1.5rem));line-height:var(--md-dialog-headline-line-height,var(--md-sys-typescale-headline-small-line-height,2rem));font-weight:var(--md-dialog-headline-weight,var(--md-sys-typescale-headline-small-weight,var(--md-ref-typeface-weight-regular,400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color,var(--md-sys-color-secondary,#625b71));fill:currentColor;font-size:var(--md-dialog-icon-size,24px);margin-top:24px;height:var(--md-dialog-icon-size,24px);width:var(--md-dialog-icon-size,24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.allow-overflow .container{overflow:visible}.container::before{background:var(--md-dialog-container-color,var(--md-sys-color-surface-container-high,#ece6f0));border-radius:inherit;content:'';inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:initial;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--clr-on-surface,#092241);font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-actions.show-bottom-divider .actions md-divider,.has-headline.show-top-divider .headline md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media (forced-colors:active){dialog{outline:2px solid WindowText}}`;class MdDialog extends Dialog{}MdDialog.styles=[styles],window.customElements.define("md-dialog",MdDialog);let ixDialogBaseClass=mixinDelegatesAria(mixinElementInternals(LitElement));class IxDialog extends ixDialogBaseClass{constructor(){super(...arguments),this.open=!1,this.preventCancel=!1,this.preventCloseOnScrimClick=!1,this.disableNextClickIsFromContent=!1,this.useNativeDialog=!1,this.allowOverflow=!1,this.nativeClosing=!1,this.dialogRef=createRef(),this.containerRef=createRef(),this.pointerDownInside=!1,this.isScrollLocked=!1,this.scrollYBackup=0,this.onKeydown=e=>{var t;"Escape"===e.key&&(this.preventCancel||(t=new Event("cancel",{bubbles:!0,composed:!0,cancelable:!0}),!this.dispatchEvent(t))?e.preventDefault():this.requestClose())},this.onNativeCancel=e=>{var t=new Event("cancel",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t)?this.requestClose():e.preventDefault()},this.onScrimClick=()=>{this.preventCloseOnScrimClick||this.requestClose()}}get nativeDialog(){var e;return null!=(e=this.dialogRef.value)?e:null}get nativeDialogContainer(){var e;return null!=(e=this.containerRef.value)?e:null}connectedCallback(){super.connectedCallback(),this.mo=new MutationObserver(()=>{this.useNativeDialog&&this.open&&this.populatePortal()}),this.mo.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0})}disconnectedCallback(){var e;super.disconnectedCallback(),null!=(e=this.mo)&&e.disconnect(),this.unlockScroll(),this.teardownPortal()}updated(e){this.useNativeDialog&&e.has("open")&&(this.open?(this.ensurePortal(),this.portalRoot&&(this.attachPortalStyles(),render(this.portalTemplate(),this.portalRoot),this.populatePortal()),this.nativeClosing&&(this.nativeClosing=!1,null!=(e=this.nativeDialogContainer)&&e.classList.remove("closing"),this.nativeOnEnd&&this.nativeDialogContainer&&this.nativeDialogContainer.removeEventListener("animationend",this.nativeOnEnd),this.nativeOnEnd=void 0),this.dispatchEvent(new Event("open",{bubbles:!0,composed:!0})),this.lockScroll(),requestAnimationFrame(()=>{var e;null!=(e=this.nativeDialog)&&e.show(),requestAnimationFrame(()=>{this.dispatchEvent(new Event("opened",{bubbles:!0,composed:!0}))})})):this.startNativeCloseAnimation())}dismiss(){this.open&&Promise.resolve().then(()=>{this.requestClose()})}startNativeCloseAnimation(){if(!this.nativeClosing){this.nativeClosing=!0,this.dispatchEvent(new Event("close",{bubbles:!0,composed:!0}));let o=()=>{var e;null!=(e=this.nativeDialogContainer)&&e.classList.remove("closing"),this.nativeClosing=!1,null!=(e=this.nativeDialog)&&e.close(),this.unlockScroll(),this.dispatchEvent(new Event("closed",{bubbles:!0,composed:!0})),this.moveNodesBackFromPortal(),this.teardownPortal()},i=this.nativeDialogContainer;if(i){i.classList.add("closing");let e=!1,t=()=>{e||(e=!0,i.removeEventListener("animationend",t),o())};this.nativeOnEnd=t,i.addEventListener("animationend",t,{once:!0}),window.setTimeout(t,1)}else o()}}ensurePortal(){var e,t;this.portalRoot||(t=(e=document.createElement("ix-dialog-portal-host")).attachShadow({mode:"open"}),this.shadowRoot&&"adoptedStyleSheets"in this.shadowRoot&&(t.adoptedStyleSheets=this.shadowRoot.adoptedStyleSheets),document.body.appendChild(e),this.portalHost=e,this.portalRoot=t)}attachPortalStyles(){var e,t,o;this.portalRoot&&!this.portalStyleEl&&(e=document.createElement("style"),t=`
|
|
2
2
|
dialog {
|
|
3
3
|
position: fixed;
|
|
4
4
|
inset: 0;
|
|
@@ -42,4 +42,4 @@ import{css,LitElement,isServer,nothing,html,render}from"lit";import{__decorate}f
|
|
|
42
42
|
@media (prefers-reduced-motion: reduce) {
|
|
43
43
|
dialog > .container { animation: none !important; }
|
|
44
44
|
}
|
|
45
|
-
`,this.contentStyles?(o=(Array.isArray(this.contentStyles)?this.contentStyles:[this.contentStyles]).map(e=>"object"==typeof e&&"cssText"in e?e.cssText:"").join("\n"),e.textContent=o+t):e.textContent=t,this.portalRoot.append(e),this.portalStyleEl=e)}teardownPortal(){var e;this.portalHost&&(this.portalRoot&&render(nothing,this.portalRoot),null!=(e=this.portalStyleEl)&&e.remove(),this.portalStyleEl=void 0,this.portalHost.remove(),this.portalRoot=void 0,this.portalHost=void 0)}moveNodesToPortal(o,e){if(this.nativeDialogContainer){let t=this.nativeDialogContainer.querySelector(e);t&&Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.slot===o).forEach(e=>t.appendChild(e))}}moveNodesBackFromPortal(){this.nativeDialogContainer&&[this.nativeDialogContainer.querySelector(".headline"),this.nativeDialogContainer.querySelector(".content"),this.nativeDialogContainer.querySelector(".actions")].forEach(e=>{e&&Array.from(e.childNodes).forEach(e=>this.appendChild(e))})}populatePortal(){this.moveNodesToPortal("headline",".headline"),this.moveNodesToPortal("content",".content"),this.moveNodesToPortal("actions",".actions")}requestClose(){this.open=!1}lockScroll(){if(!this.isScrollLocked){this.isScrollLocked=!0,this.scrollYBackup=window.scrollY||document.documentElement.scrollTop||0;var i=document.body,a=window.innerWidth-document.documentElement.clientWidth;0<a&&(i.style.paddingRight=a+"px"),i.style.overflow="hidden",i.style.position="fixed",i.style.top=`-${this.scrollYBackup}px`,i.style.left="0",i.style.right="0",i.style.width="100%";let t=e=>{var t=e.target;this.nativeDialogContainer&&t&&(this.nativeDialogContainer.contains(t)||e.preventDefault())},e=e=>t(e),o=e=>{var t;["PageUp","PageDown","Home","End","ArrowUp","ArrowDown"," "].includes(e.key)&&(t=e.target,this.nativeDialogContainer)&&t&&(this.nativeDialogContainer.contains(t)||e.preventDefault())};window.addEventListener("touchmove",e,{passive:!1}),window.addEventListener("keydown",o,{passive:!1}),this.removeScrollHandlers=()=>{window.removeEventListener("touchmove",e),window.removeEventListener("keydown",o)}}}unlockScroll(){var e;this.isScrollLocked&&(this.isScrollLocked=!1,this.removeScrollHandlers&&(this.removeScrollHandlers(),this.removeScrollHandlers=void 0),e=document.body,e.style.paddingRight="",e.style.position="",e.style.top="",e.style.left="",e.style.right="",e.style.overflow="",e.style.width="",window.scrollTo(0,this.scrollYBackup||0))}onOpen(){this.dispatchEvent(new Event("open")),this.lockScroll()}onOpened(){this.dispatchEvent(new Event("opened"))}onClose(){this.dispatchEvent(new Event("close"))}onClosed(){this.dispatchEvent(new Event("closed")),this.unlockScroll()}onCancel(e){this.preventCancel&&e.preventDefault(),this.dispatchEvent(new Event("cancel",{bubbles:!0,composed:!0}))}portalTemplate(){return html`<dialog ${ref(this.dialogRef)} @cancel="${this.onNativeCancel}" @keydown="${this.onKeydown}"><button class="scrim" type="button" aria-label="Close dialog" @click="${this.onScrimClick}"></button><div class="container" ${ref(this.containerRef)} role="dialog" aria-modal="true"><div class="headline"></div><div class="content"></div><div class="actions"></div></div></dialog>`}renderMdDialog(){return this.portalHost&&(this.moveNodesBackFromPortal(),this.teardownPortal()),html`<md-dialog ?open="${this.open}" class="dialog" ?preventCloseOnScrimClick="${this.preventCloseOnScrimClick}" ?disableNextClickIsFromContent="${this.disableNextClickIsFromContent}" ?allowOverflow="${this.allowOverflow}" @open="${this.onOpen}" @opened="${this.onOpened}" @close="${this.onClose}" @closed="${this.onClosed}" @cancel="${this.onCancel}"><slot slot="headline" name="headline"></slot><slot slot="content" name="content"></slot><slot slot="actions" name="actions"></slot></md-dialog>`}renderNativeDialog(){return this.portalRoot&&(render(this.portalTemplate(),this.portalRoot),this.populatePortal()),nothing}render(){return this.useNativeDialog?this.renderNativeDialog():this.renderMdDialog()}}var _a,_b;
|
|
45
|
+
`,this.contentStyles?(o=(Array.isArray(this.contentStyles)?this.contentStyles:[this.contentStyles]).map(e=>"object"==typeof e&&"cssText"in e?e.cssText:"").join("\n"),e.textContent=o+t):e.textContent=t,this.portalRoot.append(e),this.portalStyleEl=e)}teardownPortal(){var e;this.portalHost&&(this.portalRoot&&render(nothing,this.portalRoot),null!=(e=this.portalStyleEl)&&e.remove(),this.portalStyleEl=void 0,this.portalHost.remove(),this.portalRoot=void 0,this.portalHost=void 0)}moveNodesToPortal(o,e){if(this.nativeDialogContainer){let t=this.nativeDialogContainer.querySelector(e);t&&Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.slot===o).forEach(e=>t.appendChild(e))}}moveNodesBackFromPortal(){this.nativeDialogContainer&&[this.nativeDialogContainer.querySelector(".headline"),this.nativeDialogContainer.querySelector(".content"),this.nativeDialogContainer.querySelector(".actions")].forEach(e=>{e&&Array.from(e.childNodes).forEach(e=>this.appendChild(e))})}populatePortal(){this.moveNodesToPortal("headline",".headline"),this.moveNodesToPortal("content",".content"),this.moveNodesToPortal("actions",".actions")}requestClose(){this.open=!1}lockScroll(){if(!this.isScrollLocked){this.isScrollLocked=!0,this.scrollYBackup=window.scrollY||document.documentElement.scrollTop||0;var i=document.body,a=window.innerWidth-document.documentElement.clientWidth;0<a&&(i.style.paddingRight=a+"px"),i.style.overflow="hidden",i.style.position="fixed",i.style.top=`-${this.scrollYBackup}px`,i.style.left="0",i.style.right="0",i.style.width="100%";let t=e=>{var t=e.target;this.nativeDialogContainer&&t&&(this.nativeDialogContainer.contains(t)||e.preventDefault())},e=e=>t(e),o=e=>{var t;["PageUp","PageDown","Home","End","ArrowUp","ArrowDown"," "].includes(e.key)&&(t=e.target,this.nativeDialogContainer)&&t&&(this.nativeDialogContainer.contains(t)||e.preventDefault())};window.addEventListener("touchmove",e,{passive:!1}),window.addEventListener("keydown",o,{passive:!1}),this.removeScrollHandlers=()=>{window.removeEventListener("touchmove",e),window.removeEventListener("keydown",o)}}}unlockScroll(){var e;this.isScrollLocked&&(this.isScrollLocked=!1,this.removeScrollHandlers&&(this.removeScrollHandlers(),this.removeScrollHandlers=void 0),e=document.body,e.style.paddingRight="",e.style.position="",e.style.top="",e.style.left="",e.style.right="",e.style.overflow="",e.style.width="",window.scrollTo(0,this.scrollYBackup||0))}onOpen(){this.dispatchEvent(new Event("open")),this.lockScroll()}onOpened(){this.dispatchEvent(new Event("opened"))}onClose(){this.dispatchEvent(new Event("close"))}onClosed(){this.dispatchEvent(new Event("closed")),this.unlockScroll()}onCancel(e){this.preventCancel&&e.preventDefault(),this.dispatchEvent(new Event("cancel",{bubbles:!0,composed:!0}))}portalTemplate(){return html`<dialog ${ref(this.dialogRef)} @cancel="${this.onNativeCancel}" @keydown="${this.onKeydown}"><button class="scrim" type="button" aria-label="Close dialog" @click="${this.onScrimClick}"></button><div class="container" ${ref(this.containerRef)} role="dialog" aria-modal="true"><div class="headline"></div><div class="content"></div><div class="actions"></div></div></dialog>`}renderMdDialog(){return this.portalHost&&(this.moveNodesBackFromPortal(),this.teardownPortal()),html`<md-dialog ?open="${this.open}" class="dialog" ?preventCloseOnScrimClick="${this.preventCloseOnScrimClick}" ?disableNextClickIsFromContent="${this.disableNextClickIsFromContent}" ?allowOverflow="${this.allowOverflow}" @open="${this.onOpen}" @opened="${this.onOpened}" @close="${this.onClose}" @closed="${this.onClosed}" @cancel="${this.onCancel}"><slot slot="headline" name="headline"></slot><slot slot="content" name="content"></slot><slot slot="actions" name="actions"></slot></md-dialog>`}renderNativeDialog(){return this.portalRoot&&(render(this.portalTemplate(),this.portalRoot),this.populatePortal()),nothing}render(){return this.useNativeDialog?this.renderNativeDialog():this.renderMdDialog()}}var _a,_b;IxDialog.styles=[IxDialogStyles,css`:host([use-native-dialog]) dialog[open],:host([use-native-dialog][closing]) dialog{position:fixed;inset:0;margin:0;padding:0;border:0;background:0 0;display:block;inline-size:100vw;block-size:100dvh;pointer-events:none;z-index:99;overscroll-behavior:contain}:host([use-native-dialog]) dialog[open] .scrim,:host([use-native-dialog]) dialog[open]>.container,:host([use-native-dialog][closing]) .scrim,:host([use-native-dialog][closing]) dialog>.container{pointer-events:auto}:host([use-native-dialog]) dialog[open] .scrim,:host([use-native-dialog][closing]) .scrim{position:fixed;inset:0;background:var(--ix-dialog-scrim,rgba(0,0,0,.32))}:host([use-native-dialog]) dialog[open] .scrim{overscroll-behavior:contain;touch-action:none}:host([use-native-dialog]) dialog[open]>.container,:host([use-native-dialog][closing]) dialog>.container{transform:translate(-50%,-50%);width:auto;height:auto;max-block-size:var(--ix-dialog-max-height,90dvh);border-radius:.75rem;background:var(--ix-dialog-bg,#fff);box-shadow:var(--ix-dialog-shadow,0 .625rem 1.875rem rgba(0,0,0,.25));display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;z-index:9;transform-origin:top center;will-change:transform,opacity}:host([use-native-dialog]) .actions,:host([use-native-dialog]) .content,:host([use-native-dialog]) .headline{padding:var(--ix-dialog-section-padding,1rem)}:host([use-native-dialog]) .content{overflow:auto}:host([use-native-dialog]) .actions{display:inline-flex;gap:var(--ix-dialog-actions-gap,.5rem);justify-content:flex-end;align-items:center;padding-block:var(--ix-dialog-actions-padding-block,.75rem);border-top:var(--ix-dialog-actions-border,1px solid rgba(0,0,0,.08))}@keyframes ix-fold-in{from{transform:translate(-50%,-50%) translateY(-.5rem) scaleY(.92);opacity:0}to{transform:translate(-50%,-50%) translateY(0) scaleY(1);opacity:1}}@keyframes ix-fold-out{from{transform:translate(-50%,-50%) translateY(0) scaleY(1);opacity:1}to{transform:translate(-50%,-50%) translateY(-.5rem) scaleY(.98);opacity:0}}:host([use-native-dialog]:not([closing])) dialog[open]>.container{animation:ix-fold-in var(--ix-dialog-in-dur,1000ms) cubic-bezier(.2,.7,.3,1) both}:host([use-native-dialog][closing]) dialog>.container{animation:ix-fold-out var(--ix-dialog-out-dur,250ms) cubic-bezier(.2,.7,.3,1) both}@media (prefers-reduced-motion:reduce){:host([use-native-dialog]) dialog>.container{animation:none!important}}`],IxDialog.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query(".dialog")],IxDialog.prototype,"component",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDialog.prototype,"open",void 0),__decorate([property({type:Boolean,attribute:"prevent-cancel"})],IxDialog.prototype,"preventCancel",void 0),__decorate([property({type:Boolean})],IxDialog.prototype,"preventCloseOnScrimClick",void 0),__decorate([property({type:Boolean})],IxDialog.prototype,"disableNextClickIsFromContent",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"use-native-dialog"})],IxDialog.prototype,"useNativeDialog",void 0),__decorate([property({type:Boolean})],IxDialog.prototype,"allowOverflow",void 0),__decorate([property({type:Object})],IxDialog.prototype,"contentStyles",void 0),__decorate([state()],IxDialog.prototype,"nativeClosing",void 0);class IxDialogStyled extends(_b=IxDialog){}(_a=IxDialogStyled).styles=[Reflect.get(_b,"styles",_a),css`.dialog{max-height:90vh;max-width:90vw}`],customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-dialog following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.2.
|
|
6
|
+
"version": "1.2.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@digital-realty/ix-select": "^1.2.
|
|
30
|
+
"@digital-realty/ix-select": "^1.2.4",
|
|
31
31
|
"@lit/react": "^1.0.2",
|
|
32
|
-
"@material/web": "
|
|
32
|
+
"@material/web": "2.4.0",
|
|
33
33
|
"lit": "^3.2.1",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"tslib": "^2.3.1"
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"README.md",
|
|
103
103
|
"LICENSE"
|
|
104
104
|
],
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "36d89e383e58b8b6bab4c26e956298524e9a69a8"
|
|
106
106
|
}
|