@digital-realty/ix-dialog 1.2.5 → 1.2.6
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 -0
- package/dist/IxDialog.js +24 -6
- package/dist/IxDialog.js.map +1 -1
- package/dist/ix-dialog-styles.js +5 -9
- package/dist/ix-dialog-styles.js.map +1 -1
- package/dist/ix-dialog.min.js +4 -6
- package/package.json +2 -2
package/dist/IxDialog.d.ts
CHANGED
|
@@ -17,6 +17,10 @@ export declare class IxDialog extends LitElement {
|
|
|
17
17
|
disableNextClickIsFromContent: boolean;
|
|
18
18
|
useNativeDialog: boolean;
|
|
19
19
|
allowOverflow: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Used in conjunction with `useNativeDialog`
|
|
22
|
+
*/
|
|
23
|
+
contentStyles?: CSSResultGroup;
|
|
20
24
|
private nativeClosing;
|
|
21
25
|
private dialogRef;
|
|
22
26
|
private containerRef;
|
package/dist/IxDialog.js
CHANGED
|
@@ -176,15 +176,13 @@ export class IxDialog extends LitElement {
|
|
|
176
176
|
if (!this.portalRoot || this.portalStyleEl)
|
|
177
177
|
return;
|
|
178
178
|
const style = document.createElement('style');
|
|
179
|
-
|
|
180
|
-
|
|
179
|
+
const portalLayoutStyles = `
|
|
180
|
+
dialog {
|
|
181
181
|
position: fixed;
|
|
182
182
|
inset: 0;
|
|
183
183
|
margin: 0;
|
|
184
184
|
padding: 0;
|
|
185
185
|
border: 0;
|
|
186
|
-
top: 30%;
|
|
187
|
-
left: 5%;
|
|
188
186
|
background: transparent;
|
|
189
187
|
display: grid;
|
|
190
188
|
place-items: center;
|
|
@@ -196,7 +194,7 @@ export class IxDialog extends LitElement {
|
|
|
196
194
|
.scrim {
|
|
197
195
|
position: fixed;
|
|
198
196
|
inset: 0;
|
|
199
|
-
background: var(--ix-dialog-scrim, rgba(0,0,0,0.
|
|
197
|
+
background: var(--ix-dialog-scrim, rgba(0,0,0,0.5));
|
|
200
198
|
pointer-events: auto;
|
|
201
199
|
z-index: 1000;
|
|
202
200
|
touch-action: none;
|
|
@@ -222,7 +220,24 @@ export class IxDialog extends LitElement {
|
|
|
222
220
|
@media (prefers-reduced-motion: reduce) {
|
|
223
221
|
dialog > .container { animation: none !important; }
|
|
224
222
|
}
|
|
225
|
-
`;
|
|
223
|
+
`;
|
|
224
|
+
if (this.contentStyles) {
|
|
225
|
+
const stylesArray = Array.isArray(this.contentStyles)
|
|
226
|
+
? this.contentStyles
|
|
227
|
+
: [this.contentStyles];
|
|
228
|
+
const customContentStyles = stylesArray
|
|
229
|
+
.map(contentStyle => {
|
|
230
|
+
if (typeof contentStyle === 'object' && 'cssText' in contentStyle) {
|
|
231
|
+
return contentStyle.cssText;
|
|
232
|
+
}
|
|
233
|
+
return '';
|
|
234
|
+
})
|
|
235
|
+
.join('\n');
|
|
236
|
+
style.textContent = customContentStyles + portalLayoutStyles;
|
|
237
|
+
}
|
|
238
|
+
else {
|
|
239
|
+
style.textContent = portalLayoutStyles;
|
|
240
|
+
}
|
|
226
241
|
this.portalRoot.append(style);
|
|
227
242
|
this.portalStyleEl = style;
|
|
228
243
|
}
|
|
@@ -561,6 +576,9 @@ __decorate([
|
|
|
561
576
|
__decorate([
|
|
562
577
|
property({ type: Boolean })
|
|
563
578
|
], IxDialog.prototype, "allowOverflow", void 0);
|
|
579
|
+
__decorate([
|
|
580
|
+
property({ type: Object })
|
|
581
|
+
], IxDialog.prototype, "contentStyles", void 0);
|
|
564
582
|
__decorate([
|
|
565
583
|
state()
|
|
566
584
|
], IxDialog.prototype, "nativeClosing", void 0);
|
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 @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 style.textContent = `\n dialog {\n position: fixed;\n inset: 0;\n margin: 0;\n padding: 0;\n border: 0;\n top: 30%;\n left: 5%;\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.32));\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 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 { 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"]}
|
package/dist/ix-dialog-styles.js
CHANGED
|
@@ -7,7 +7,7 @@ export const IxDialogStyles = css `
|
|
|
7
7
|
dialog {
|
|
8
8
|
border: none;
|
|
9
9
|
padding: 0;
|
|
10
|
-
margin:
|
|
10
|
+
margin: auto;
|
|
11
11
|
max-width: 90vw;
|
|
12
12
|
max-height: 90dvh;
|
|
13
13
|
width: auto;
|
|
@@ -22,17 +22,14 @@ export const IxDialogStyles = css `
|
|
|
22
22
|
box-sizing: border-box;
|
|
23
23
|
background: var(--ix-dialog-bg, #fff);
|
|
24
24
|
color: var(--ix-dialog-fg, inherit);
|
|
25
|
-
border-radius: var(--ix-dialog-radius, 0.
|
|
25
|
+
border-radius: var(--ix-dialog-radius, 0.1875rem);
|
|
26
26
|
max-width: var(--ix-dialog-max-width, 45rem);
|
|
27
27
|
overflow: hidden;
|
|
28
|
-
box-shadow: var(
|
|
29
|
-
--ix-dialog-shadow,
|
|
30
|
-
0 0.625rem 1.875rem rgba(0, 0, 0, 0.25)
|
|
31
|
-
);
|
|
28
|
+
box-shadow: var(--ix-dialog-shadow, 0px 12px 16px 0px rgba(0, 0, 0, 0.58));
|
|
32
29
|
}
|
|
33
30
|
|
|
34
31
|
.headline {
|
|
35
|
-
padding:
|
|
32
|
+
padding: 24px 24px 0px 24px;
|
|
36
33
|
font: var(
|
|
37
34
|
--ix-dialog-headline-font,
|
|
38
35
|
600 1.125rem/1.2 system-ui,
|
|
@@ -41,12 +38,11 @@ export const IxDialogStyles = css `
|
|
|
41
38
|
}
|
|
42
39
|
|
|
43
40
|
.content {
|
|
44
|
-
padding: 0
|
|
41
|
+
padding: 0;
|
|
45
42
|
overflow: auto;
|
|
46
43
|
}
|
|
47
44
|
|
|
48
45
|
.actions {
|
|
49
|
-
padding: 0.75rem 1rem 1rem;
|
|
50
46
|
display: flex;
|
|
51
47
|
gap: 0.5rem;
|
|
52
48
|
justify-content: flex-end;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-dialog-styles.js","sourceRoot":"","sources":["../src/ix-dialog-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-dialog-styles.js","sourceRoot":"","sources":["../src/ix-dialog-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDialogStyles = css`\n :host {\n display: contents;\n }\n\n dialog {\n border: none;\n padding: 0;\n margin: auto;\n max-width: 90vw;\n max-height: 90dvh;\n width: auto;\n background: transparent;\n }\n\n dialog::backdrop {\n background: rgba(0, 0, 0, 0.32);\n }\n\n .container {\n box-sizing: border-box;\n background: var(--ix-dialog-bg, #fff);\n color: var(--ix-dialog-fg, inherit);\n border-radius: var(--ix-dialog-radius, 0.1875rem);\n max-width: var(--ix-dialog-max-width, 45rem);\n overflow: hidden;\n box-shadow: var(--ix-dialog-shadow, 0px 12px 16px 0px rgba(0, 0, 0, 0.58));\n }\n\n .headline {\n padding: 24px 24px 0px 24px;\n font: var(\n --ix-dialog-headline-font,\n 600 1.125rem/1.2 system-ui,\n sans-serif\n );\n }\n\n .content {\n padding: 0;\n overflow: auto;\n }\n\n .actions {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n }\n`;\n"]}
|
package/dist/ix-dialog.min.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
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:0;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,.75rem);max-width:var(--ix-dialog-max-width,45rem);overflow:hidden;box-shadow:var(--ix-dialog-shadow,0 .625rem 1.875rem rgba(0,0,0,.25))}.headline{padding:1.25rem 1.5rem .75rem;font:var(--ix-dialog-headline-font,600 1.125rem/1.2 system-ui,sans-serif)}.content{padding:0 1.5rem 1rem;overflow:auto}.actions{padding:.75rem 1rem 1rem;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;this.portalRoot&&!this.portalStyleEl&&((e=document.createElement("style")).textContent=`
|
|
2
|
-
|
|
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=`
|
|
2
|
+
dialog {
|
|
3
3
|
position: fixed;
|
|
4
4
|
inset: 0;
|
|
5
5
|
margin: 0;
|
|
6
6
|
padding: 0;
|
|
7
7
|
border: 0;
|
|
8
|
-
top: 30%;
|
|
9
|
-
left: 5%;
|
|
10
8
|
background: transparent;
|
|
11
9
|
display: grid;
|
|
12
10
|
place-items: center;
|
|
@@ -18,7 +16,7 @@ import{css,LitElement,isServer,nothing,html,render}from"lit";import{__decorate}f
|
|
|
18
16
|
.scrim {
|
|
19
17
|
position: fixed;
|
|
20
18
|
inset: 0;
|
|
21
|
-
background: var(--ix-dialog-scrim, rgba(0,0,0,0.
|
|
19
|
+
background: var(--ix-dialog-scrim, rgba(0,0,0,0.5));
|
|
22
20
|
pointer-events: auto;
|
|
23
21
|
z-index: 1000;
|
|
24
22
|
touch-action: none;
|
|
@@ -44,4 +42,4 @@ import{css,LitElement,isServer,nothing,html,render}from"lit";import{__decorate}f
|
|
|
44
42
|
@media (prefers-reduced-motion: reduce) {
|
|
45
43
|
dialog > .container { animation: none !important; }
|
|
46
44
|
}
|
|
47
|
-
`,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;requestUpdateOnAriaChange(IxDialog),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([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};
|
|
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;requestUpdateOnAriaChange(IxDialog),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.6",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"README.md",
|
|
103
103
|
"LICENSE"
|
|
104
104
|
],
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "8a5e85ba0f6a3466418ffcff706bcc1751f44eab"
|
|
106
106
|
}
|